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高!
当然,如果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个不同版本的代码
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);
}
这个宽度表达式是min-width的另一种选择,它应该是旧版本IE的一个解决方案。
我认为你的问题是你的列是决定元素的宽度,而不是div。
编辑:同时检查你的浏览器是否在兼容模式