Question

enter image description here 这可能是一个简单的问题，但我遇到了问题：在我的网页中，我有以下内容：

<head>
   <!-- Stuff here -->
</head>

<body>
   <header>
      <div class="content-wrapper">
          <!-- More stuff here... -->
      </div>
   </header>
</body>

其中content-wrapper位于css文件中并定义max-width: 960px。我遇到的问题是max-width在IE8中没有效果。在正文中，我有一个表，我认为应该受content-wrapper中定义的宽度限制，但在IE8中它只是忽略它（但它在Firefox中有效）。

我尝试了几件不同的事情，但没有成功：

将style="max-width:960px"添加到
将style="max-width:960px"添加到给我带来悲伤的<tr>
为有问题的style="width:400px"和<th>

<td>

没有人在IE中工作过！有任何想法吗？我错过了什么？

新信息：

我把我的表放在这样的div标签中：

<div style="border: 1px solid; width: 960px">
   <!-- Table comes here -->
</div>

正如您在附加图像中看到的那样，正确地将div更改为具有边框和指定的宽度，但该表在IE8中忽略它。在Firefox中它可以正常工作。

Answer 1

content-wrapper的容器必须有一个width以及IE8中的max-width才能识别它。

看一下有关IE8和max-width的这篇文章： http://www.zeilenwechsel.de/it/articles/5/How-max-width-fails-in-IE8.html

Answer 2

width: 90% ...它适用于所有浏览器...我测试了它并在下面显示了测试结果。

<强> HERE IS A DEMO

enter image description here

.content-wrapper
{ 
    width: 90%;
    height: 190px;
    background: red;
    margin: auto;
}

Answer 3

<html>
   <header>
        <style>
            .content-wrapper {
               width:450px;
               background-color: red;
               height: 250px;
            }
           .content-wrapper table {
              width: 100%;
           }
       </style>
    </header>
    <body>
      <div class="content-wrapper">
          <table>
            <tr>
                <td>
                    Column 11
                </td>
                <td>
                    Column 12
                </td>
                <td>
                    Column 13
                </td>
            </tr>
            <tr>
                <td>
                    Column 21
                </td>
                <td>
                    Column 22
                </td>
                <td>
                    Column 23
                </td>
            </tr>
          </table>
      </div>
    </body>
</html>

将css移动到您的css文件。我认为这将有效

IE中的表宽度

3 个答案: