Question

IE8文档说它支持min-width，但它似乎对我不起作用。

我希望成为最小宽度的html在表格单元格中。

我在这里看到另一个问题，建议在每个单元格中添加1像素高度div，并设置宽度，但这不起作用 - 由于某种原因，IE将其渲染为18像素高。

这是html代码：

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
table.keyboard div.key {
    height: 50px;
    font-size:50px;
    border: 5px outset gray;
    min-width: 60px;
    text-align: center;
}
table.keyboard div.spc {
    height: 1px;
    width: 60px;
    background-color: green;
}

table.keyboard td:hover {
    background-color: lightblue;
}
table.keyboard {
    border: 3px inset blue;
}
</style>
</head>
<body>
<div id="body">
<div>Here is some stuff</div>
<table class='keyboard'>
    <tbody>
        <tr>
            <td><div class='key'>1</div><div class='spc'></div></td>
            <td><div class='key'>2</div><div class='spc'></div></td>
            <td><div class='key'>3</div><div class='spc'></div></td>
            <td><div class='key'>4</div><div class='spc'></div></td>
            <td><div class='key'>5</div><div class='spc'></div></td>
        </tr>
    </tbody>
</table>
</div>
</body>
</html>

“spc”div高出18像素！

当然，如果min-width工作，我就不需要div ......

<table class='keyboard'>
    <tbody>
        <tr>
            <td><div class='key'>1</div></td>
            <td><div class='key'>2</div></td>
            <td><div class='key'>3</div></td>
            <td><div class='key'>4</div></td>
            <td><div class='key'>5</div></td>
        </tr>
    </tbody>
</table>

任何线索？

为了让这更容易，我已经放了3个不同版本的this code on my website。

Answer 1

http://jsfiddle.net/3htmA/

IE8。你的代码很完美。

Answer 2

HTML TABLE规范使用COL来定义列宽。请参阅以下规范：http://www.w3.org/TR/html4/struct/tables.html#h-11.2.4

以下是如何使用它的示例： http://www.htmldog.com/guides/htmladvanced/tables/

表格单元格的最小宽度与块级元素的工作方式不同。表格单元格在列级别上进行控制，而不是在单个单元格级别上进行控制。如果给定的单元格大小增加或减少，则整个列都将受到影响，除非由标记明确控制。

Answer 3

试试这个：

table.keyboard .key
{
min-width:60px;
width: expression(this.width < 60 ? 60: true);
}

这个宽度表达式是min-width的替代方案，它应该是旧版本IE的解决方法。

我认为您的问题是您的列正在确定元素的宽度，而不是div。

编辑：

同时检查您的浏览器是否处于兼容模式。

如何在IE8中模拟最小宽度

3 个答案: