Question

我有以下CSS代码，适用于Firefox，Chrome，但是当我在IE7中运行它时就像地狱一样！

<!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的第一个框中获得滚动条，而不是在任何其他浏览器中？

Answer 1

我怀疑overflow:auto中有.mybox但我无法测试，因为我目前无法访问IE7。

Answer 2

将.mybox的宽度增加到60px或设置overflow:hidden。这是因为IE7显示了带有不同宽度计算的滚动条，这非常烦人......

Answer 3

.small的宽度为45px，左右填充为10px。 .boxfont的左边距为15px。

45px-10px-10px-15px只为您的文本留下10px的空间。其他浏览器正在显示文本，IE正在放入滚动条。

将overflow:hidden放在.boxfont上以查看它在Firefox中被截断的位置。

要解决此问题，您可以将overflow:visible放在.small上以让IE显示文字，但这样可以让您的信箱更大一些。或者你可以稍微增加盒子的宽度。

Answer 4

您遇到的问题是由IE Box Model问题引起的。您可以通过替换.boxfont定义来解决代码中的显示问题。

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

Answer 5

如果你可以移除overflow:auto属性，它可以工作。但更好的是setup IE7 cross css style来修复滚动条问题。

如何修复我的CSS代码以使用IE（它显示滚动条）？

5 个答案: