Question

由于一些奇怪的原因，IE忽略了我的列宽，只是将所有六列设置为相等的宽度。

table{
table-layout: fixed;
} 

<colgroup>
        <col style="width: 15%;" />
        <col style="width: 40%;"/>
        <col style="width: 5%;" />
        <col style="width: 10%;" />
        <col style="width: 10%;" />
        <col style="width: 20%;" />
    </colgroup>

Answer 1

简短回答：因为IE糟透了

答案很长：请改用<table>，<tr>和<td>。并使用colspan属性来达到同样的效果。

Answer 2

Sean你可以使用<td>标签来设置不同宽度的样式，但是我没有看到你现在使用的代码存在任何问题，前提是<colgroup>标记放在相对于<table>标记的正确放置，如下所示：

<table style="border:1px solid #000; table-layout:fixed;">
  <colgroup>
     <col style="width: 25%;" />
     <col style="width: 65%;" />
     <col style="width: 10%;" />
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>

IE 8显然不能很好地与jsfiddle一起使用，因此我将代码转储到其中一个W3C sandboxes进行测试。只需转到IE 8中的链接，用上面的内容替换他们的colgroup部分，然后点击“提交代码”按钮查看结果。

Answer 3

虽然您可能已经遇到过关于IE8的此site和此note，但如果您再次详细查看它们，这些应该会非常有用。

在解析CSS时，IE8是相对不兼容的Web浏览器。

当任何人试图进行任何类型的调整时，IE8中的这种限制变得非常突出，无论是窗口还是桌面大小。

正如我上面提到的其中一个网站所示，您可以尝试用JavaScript补充IE8，而不是仅仅依赖于HTML和CSS。

Internet Explorer 8忽略表上的colgroup宽度

3 个答案: