相关疑难解决方法(0)

摘要

什么是确保表格单元格不能小于某个最小宽度的最佳方法.

例

我想确保表中容器的宽度至少为100px宽.如果有更多可用空间,则表格单元格应填充该空间.

浏览器兼容性

我可能想找到一个适用的解决方案

• IE 6-8
• FF 2-3
• 苹果浏览器

按优先顺序排列.

这些属性不被视为标准CSS吗？

我正在使用这样的东西,它可以在Chrome 12,FF4,Opera 11和Safari 5上正常工作,但在IE9上,如果使用的话,最小宽度不受尊重width < min-width.

<span style="float:left; width:11%; min-width:150px;">
    ...
</span>

编辑:对自由编辑和迁移我的问题有点恼火,但没有.这是一个更全面的例子,显示了IE9与其他浏览器的明显区别.

<html><body>
<p style="width: 600px">
<span style="float: left; width: 11%; min-width: 150px">Hello.</span>
<span style="float: left; width: 11%">World.</span>
</p>
</body></html>

编辑2:如下面Kevin的评论中所述,添加<!DOCTYPE html>到开头解决了IE问题.

我正在尝试使用两个50%列宽的此布局.但似乎当右列达到其"最小宽度"时,它会进入左列.有没有办法使用'shim'技术为包装器设置最小宽度,以便两列都停止调整大小.因此,消除了在左列下发现右列的问题.

我的页面如下.

<style type="text/css">

#left {
    float: left;
    width: 50%;
}

.minwidth {
    width: 500px;
    height: 0;
    line-height: 0;
}

</style>

<div id="wrapper">
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
    <div class="minwidth">&nbsp;</div>
</div>

问题是左列将停止调整大小,但右列将位于左列下方并继续调整大小.基本上,我想要的效果是一旦包装器宽度低于左下,左侧和右侧列也停止调整大小.将垫片放在左右两列都不起作用.

是否有另一种方法可以获得两个50%宽的色谱柱并使用垫片来正确设置最小宽度？

谢谢.

编辑:minwidth类中的空格实际上是转换后的空格.;)