如何在IE8中模拟最小宽度

Nik*_*cke 7 css internet-explorer-8

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>
Run Code Online (Sandbox Code Playgroud)

"spc"div出现18像素高!

当然,如果最小宽度工作,我不需要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>
Run Code Online (Sandbox Code Playgroud)

有线索吗?

为了使这更容易,我在我的网站上放了3个不同版本的代码.

bra*_*ick 4

http://jsfiddle.net/3htmA/

IE8。你的代码工作完美。

  • 所以设置它:) 例如: &lt;!DOCTYPE html&gt; (7认同)
  • 如果有人想知道需要 `DOCTYPE` 声明以避免“怪异模式”:http://hsivonen.iki.fi/doctype/ (3认同)