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佈局更改爲字體樣式

回答

相關問題