如何修復我的CSS代碼以使用IE（它顯示滾動條）？

我有以下的CSS代碼，可以在Firefox，Chrome中正常工作，但是在IE7中運行它時會打破地獄！如何修復我的CSS代碼以使用IE（它顯示滾動條）？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="en"> 

    <head> 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

    <title>Box Test</title> 

    <style type="text/css"> 

     .mybox { float:left; overflow:auto; visibility:visible; 
      width:220px; height:100px; 
      margin:3px; padding:10px; 

      border-left:1px solid gray; border-right:1px solid black; 
      border-top:1px solid gray; border-bottom:1px solid black; 
      background-color:gold; } 

    .small { width:45px; height:auto; font-weight:bold;} 

    .boxfont{font-weight:bold; font-size:16px; margin-left:15px;} 

    </style> 

    </head> 

    <body> 

    <div class="mybox small"> 
    box 1 
     <div class="boxfont">box1 label</div> 
     </div> 

    <div class="mybox small">box 2</div> 

    <div class="mybox small">box 3</div> 


    </body> 

</html>

爲什麼我在IE7的第一個盒子上得到滾動條，而不是在任何其他瀏覽器中？

來源

2009-06-09 gath

看到這個問題/答案：http://stackoverflow.com/questions/927626/how-do-you-deal-with-internet-explorer – JoshFinnie 2009-06-09 13:19:27

我懷疑overflow:auto在.mybox但我無法測試它，因爲我目前無法訪問IE7。

來源

2009-06-09 13:18:57

將.mybox的寬度增加到60px或設置overflow:hidden。這是因爲IE7顯示了不同的計算寬度的滾動條，這是非常煩人......

來源

2009-06-09 13:24:42

。小有×45像素的寬度和10px的左右填充。 .boxfont的左邊距爲15px。

×45像素-10px的-10px的-15px的留給你的只是你的文字空間10px的。其他瀏覽器正在顯示文本，IE正在放入滾動條。

把overflow:hidden上.boxfont，看看它在Firefox切斷。

爲了解決這個問題，你可以把overflow:visible上。小有IE瀏覽器顯示文本，但是，這將使你的盒子有點大。或者你可以稍微增加一下盒子的寬度。

來源

2009-06-09 13:27:17 Emily

你experieinceing的問題是由於IE Box Model問題。您可以通過替換如下所示的.boxfont定義來修復代碼中的顯示問題。

.boxfont{font-weight:bold; font-size:16px; margin-left:10px;}

來源

2009-06-09 13:31:03

如果你能刪除overflow:auto屬性它可以工作。但更好你setup IE7 cross css style來解決滾動條問題。

來源

2012-04-17 02:36:01 Stacy

如何修復我的CSS代碼以使用IE（它顯示滾動條）？

回答

相關問題