如何模仿分钟

2018-06-19 22:19:53

IE8文档说它支持最小宽度，但它似乎不适用于我。

我想成为最小宽度的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出现18px高！

当然，如果最小宽度工作，我不会需要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个不同版本的代码。

http://jsfiddle.net/3htmA/

IE8。你的代码工作完美。

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

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

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

尝试这个：

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

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

我认为你的问题是你的专栏是确定元素的宽度，而不是div。

编辑：

另请检查您的浏览器是否未处于兼容模式。

链接地址: http://www.djcxy.com/p/56073.html

上一篇: How to emulate min

下一篇: Google Analytics interferes with history.back() in android browser?