如何修复我的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（它显示滚动条）？

回答

相关问题