CSS布局更改为字体样式

请考虑以下HTML标记。在我测试过的大多数浏览器中，第二个列表的显示方式不同（每个列表项都缩进）。CSS布局更改为字体样式

这两个列表之间的唯一区别与CSS font-style属性有关，我不希望更改列表布局。有没有解释这种行为？

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      body {font-family: sans-serif} 
      span {float: left} 
      ul.bad span {font-style: italic} 
     </style> 
    </head> 
    <body> 
     <ul> 
      <li><span>foo</span></li> 
      <li><span>foo</span></li> 
      <li><span>foo</span></li> 
      <li><span>foo</span></li> 
     </ul> 
     <ul class="bad"> 
      <li><span>foo</span></li> 
      <li><span>foo</span></li> 
      <li><span>foo</span></li> 
      <li><span>foo</span></li> 
     </ul> 
    </body> 
</html>

来源

2011-07-08 Joshua Johnson

什么浏览器？布局如何不同？除了斜体文本，我没有看到Firefox提供的代码提供的区别。 – Jrod

不知道是什么原因造成的，但删除'span {float：left}'会修正缩进问题。 – kei

@Jrod - 我在FF 5中看到底部列表交错（每个连续的foo更靠右）。 –

跨度span与连胜文成为18像素的高度，而斜体文本强制span到19像素。

这在使用float: left时会导致稍微不同的行为。

 span // <-- height: 18px; 
.bad span // <-- height: 19px;

一个速战速决将设置line height属性等于两个跨度类型：

span {float:left; line-height:15px;}

不是关于你的代码的意图;）

来源

2011-07-08 15:30:03

只是尝试过自己，并将行高设置为15px;将它设置为更大的值（比如35px）会导致两个列表中的交错。 –

非常有趣，谢谢你的答案。看起来我有点阅读，理解_为什么这是事实。 :) –

也许无衬线浏览器选择的字体具有不同的斜体（或不带斜体）。尝试选择一个特定的字体，如verdana，而不是看看会发生什么

来源

2011-07-08 15:33:21 Rodolfo

布局将取决于用于“无衬线”替换的真实字体。所以你需要选择正确的字体名称。

我在Windows（7）的所有主流浏览器中都看不到任何区别，请参阅：http://jsfiddle.net/uTjSd/ 在所有主窗口中，“sans-serif”都显示为“Arial”。

来源

2011-07-08 15:34:04

CSS布局更改为字体样式

回答

相关问题