1

我有以下 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 中的第一个框上出现滚动条，而在任何其他浏览器中却没有？

4

5 回答 5

1

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

于 2009-06-09T13:18:57.740 回答
1

增加.myboxto60px或 set的宽度overflow:hidden。这是因为 IE7 以不同的宽度计算显示滚动条，这非常烦人......

于 2009-06-09T13:24:42.287 回答
1

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

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

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

要解决此问题，您可以overflow:visible使用 .small 让 IE 显示文本，但这会使您的框变大一点。或者你可以稍微增加你的盒子的宽度。

于 2009-06-09T13:27:17.927 回答
1

您遇到的问题是由于IE 框模型问题。您可以通过替换 .boxfont 定义来修复代码中的显示问题，如下所示。

.boxfont{font-weight:bold; font-size:16px; margin-left:10px;}
于 2009-06-09T13:31:03.147 回答
1

如果您可以删除该overflow:auto属性，它可以工作。但最好设置 IE7 跨 css 样式来修复滚动条问题。

于 2012-04-17T02:36:01.830 回答