logo标签列表

如何在IE8中模拟min-width？

internet-explorer-8css
7

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个回答
4
很奇怪 - 它在那里可以工作，但在我的网站上却不行。我想知道区别在哪里？ - Nikki Locke
7
<!DOCTYPE HTML> - korywka
3
如有人想知道，DOCTYPE声明是为了避免进入“怪异模式”而必需的：http://hsivonen.iki.fi/doctype/ - Mikko Rantalainen
如果一个 div 渲染比预期的要大，请确保它的 padding 值为零。 - Mark Rabjohn
0

试试这个：

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

此宽度表达式是 min-width 的替代方案，旨在解决旧版本 IE 的问题。

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

编辑：

还要检查浏览器是否未处于兼容模式。

0
抱歉，我不明白。我希望所有表格列的宽度都是最小的。而且我确实希望整个列受到影响。不确定为什么需要引入col元素？ - Nikki Locke
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接