Q

IE和Chrome計算CSS填充不同

css

2012-03-21 80 views 2 likes

2

我有以下的CSS和HTML：IE和Chrome計算CSS填充不同

.TestPadding{ 
width:29px; 
text-align:center; 
height:18px; 
padding:3px 0px 2px 0px; 
margin:2px 1px; 
font-family:Trebuchet MS; 
font-weight:bold; 
font-size:13px; 
border:2px solid black; 
float:left;} 

<div class="TestPadding">1</div> 
<div class="TestPadding">2</div> 
<div class="TestPadding">3</div> 
<div class="TestPadding">4</div> 
<div class="TestPadding">5</div> 
<div class="TestPadding">6</div> 
<div class="TestPadding">7</div> 
<div class="TestPadding">8</div> 
<div class="TestPadding">9</div> 
<div class="TestPadding">10</div>

的問題是，呈現在IE和Chrome不同。這裏是什麼樣子：

enter image description here

Chrome是在頂部，IE瀏覽器在底部。在IE上，這些數字看起來並不垂直。我試着在CSS上製作各種組合，但沒有一個給我一致的垂直對齊和尺寸。

如果你想嘗試一下，有一個**fiddle here. **

感謝。

2012-03-21 frenchie

+1

他們正確地計算填充。箱子寬度和高度相等。爲什麼兩個瀏覽器上的文本不一致都可能是另一個問題。 – BoltClock 2012-03-21 14:44:09

+0

您是否嘗試過使用CSS重置？它將消除瀏覽器之間的許多不一致。它可能會刪除一些你認爲會存在的CSS默認值，但這只是將它們放回原處。當你與他們一起開始你的項目時，這完全值得你付出努力，甚至更加有效。 – 2012-03-21 14:50:03

A

回答

3

嘗試使用line-height:18px;並沒有垂直填充（padding:0 2px;）。

2012-03-21 14:45:40

+1

男人，我花了很多時間在這！感謝行高建議;我離開了填充，它的作用就像一個魅力。 – frenchie 2012-03-21 14:52:53

+0

我很高興能幫到你！ :)祝你好運！ – 2012-03-21 15:28:14

2

請勿使用padding，而是在div上使用line-height（最好使用單位em）。順便說一句，我建議你甚至不要使用div s，而是使用列表（ul寬度li s）。

2012-03-21 14:44:42

1

它們在IE中正確中間對齊。嘗試在其中一個框中添加一個q，你就會明白我的意思。

您可以通過添加：「line-height: 18px;」來修復此問題並獲得Chrome的外觀。

2012-03-21 14:45:26

0

這是因爲Chrome和IE的默認值爲line-height。

設置line-height到19px，它應該垂直對齊兩個瀏覽器

2012-03-21 14:45:32 danwellman

3

你總是可以用一個小的IE黑客：

_padding-top:4px（例如）

如果你選擇走下來的IE瀏覽器黑客根，這裏是如何應用到不同版本的IE：

padding-top:4px\9; - IE8及以下
*padding-top:4px; - IE7及以下
_padding-top:4px; - IE6

鋁

2012-03-21 14:46:14 Alex

相關問題