Q

IE和Chrome计算CSS填充不同

css

2012-03-21 78 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

相关问题