对在 IE 中不起作用的元素使用初始宽度答案

【问题标题】：use initial width for element not working in IE对在 IE 中不起作用的元素使用初始宽度
【发布时间】：2014-01-16 08:50:43
【问题描述】：

我有一个图形插件，可以将画布和图例 <table> 插入其容器。在这个插件中，table 没有定义 width，并且在我的 CSS 中，当我的插件被插入时，该容器内的表格有一个宽度。

所以，新的 div 从 CSS 继承 table{ width: 100%} 并且呈现错误。

我尝试使用 width: initial;，在 Chrome 上看起来不错，但 IE doesn't like it ^{检查浏览器兼容性}

我承认在脚本/插件中更改/强制使用内联 CSS，因为它必须在任何环境中工作。

这里最好的解决方案是什么？

【问题讨论】：

【解决方案1】：

就像你说的，一般width: auto会有类似的效果。有规则：

.my-selector {
    width: auto;
    width: initial;
}

如果支持，则应使其使用initial，否则应使用auto。

【讨论】：

请注意，initial 是一个有效的属性值 (developer.mozilla.org/en-US/docs/Web/CSS/initial)。但是（如果您在上一个链接中向下滚动到“浏览器兼容性”），没有IE版本支持它。
这被称为 fallback 并且是 CSS 中非常常见的编码模式。此外，使用width: auto 不仅会产生相似效果，还会产生完全相同 效果，因为auto 被定义为初始width 属性的值。

【解决方案2】：

在脚本内部使用width: auto; inline 解决了 Chrome、FIrefox 和 IE 11 上的问题。只是不确定是否有更好的方法。

【讨论】：