google-chrome - 文本字段在表格中时忽略最小宽度......任何解决方法？

Question

在 Windows 上的谷歌浏览器中，

<input type="text" style="min-width:10px;width:100%;">

正如你在这里看到的作品：

<div style="width:50px;background:red;">
    <input type="text" style="min-width:10px;width:100%;">
</div>

这里不是！

<table style="background:red;">
    <tr><td><input type="text" style="min-width:10px;width:100%;"></td></tr>
</table>

我正在寻找一个纯 css 解决方案（size="1" 解决了我的问题，顺便说一句）

Answer 1

Chrome 和 Safari 根本不支持表格元素的 min-width 属性。但是，当应用于表格单元格时，它们会遵守最小宽度。

其他：

1. Firefox：支持（在 5 中测试，不确定从哪个版本开始）
2. Internet Explorer：支持（因为 IE8。IE7 及以下似乎不支持它） Chrome：不支持（据我所知的所有版本） Safari：不支持（据我所知的所有版本
3. Opera：支持（在 11.5 中测试，不确定从哪个版本开始）

检查这个网站：https ://developer.mozilla.org/en/CSS/min-width

也许尝试一些％...

Answer 2

添加

cellpadding="0" 

cellspacing="0" 

到你的桌子上

<table cellpadding="0" cellspacing="0" style="background:red;">
    <tr><td><input type="text" style="min-width:10px;width:100%;"></td></tr>
</table>