預李裏：在Chrome和IE9

固定格式我有這個網站：預李裏：在Chrome和IE9

<!DOCTYPE html> 
<html> 
<head> 
<style> 
pre { 
    overflow: auto; 
} 
</style> 
</head> 

<body> 
<ol> 
<li> 
<pre>some 
code code code code code code code code code code code code code code code code code code code 
code code</pre></li> 
<li><pre>some more code code code code code code code code code code code code code code code code code code code code code</pre></li> 
</ol> 
</body> 
</html>

這樣做的目的是，這將導致文本預格式化位的編號列表。當這些文本位很長時，將通過溢出來添加滾動條：auto;。

這可以在Firefox 20中正常工作。但是，在IE9中，預格式化文本向下移動一行（因此每個項目現在需要兩行，一個用於數字，一個用於預格式化文本）。在Chrome中，格式是正確的，只是數字不顯示。

我試着改變溢出：滾動，無濟於事。也試圖改變DOCTYPE到< DOCTYPE HTML PUBLIC！「 - // W3C // DTD XHTML 1.0過渡// EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」>無濟於事。

的問題消失在Chrome和IE9當你取出溢出：汽車;，但是你再也沒有拿到滾動條了，這對我很重要。

有沒有一種方法，使本次車展正確不僅在Firefox，但IE9和Chrome呢？

來源

2013-05-09 user1147862

我無法重現這個問題在Chrome或Internet Explorer（8，9或10）前添加一個空pseudoelement。你*積極*，你沒有任何遺棄標籤？ http://dirtymarkup.com && http://validator.w3.org – ParrotMac 2013-05-09 02:33:45

經過一番嘗試，我發現問題是由溢出引起的：auto或overflow：scroll。我編輯了我最初的問題來反映這一點。 – user1147862 2013-05-09 04:01:20

你有沒有找到解決方案？我現在有與Chrome 33.0.1750.152相同的行爲。解決這個問題的唯一方法是在'pre'元素前添加額外的流內容（或者禁用'overflow：auto'）... – DMKE 2014-03-28 16:41:06

每李

li:before { 
content: ""; 
}

來源

2016-07-05 11:12:34

預李裏：在Chrome和IE9

回答

相關問題