javascript - 为什么浏览器会替换通过 css 分配的宽度值？

Question

当我为所有选择分配基本样式时，例如。

width: 300px;
padding: 0;
margin: 0;
border-width: 1px;

在不同情况下通过 javascript 检索宽度时，我得到了意想不到的结果。

• 当选择可见时，宽度为298px。
• 当select为display:none时，宽度也为298px(ff,查询)
• 当 select 在一个带有 display:none 的 div 中时，宽度是正确的300 像素。

(结果也是一样的assigning: box-sizing: border-box)

好吧，检索到的宽度有时与使用的浏览器和 javascript 框架不同，但总而言之，我只想能够检索到分配的宽度 (300px)。(我想这与这里所说的“形式怪异”有关:http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/，但为什么浏览器不使用用户指定的宽度？？)

如何检索分配的宽度？真的有办法吗？

例子:

http://jsfiddle.net/ETCcH/5/ (对于使用 jquery，或者使用 mootools 将 5 替换为 4)

(用不同的浏览器查看和尝试)

Answer 1

你永远不会得到写在 css 文件中的值。使用 JavaScript，您将只能获得 Web 浏览器当前应用于该元素的 css 属性。

在你的情况下，如果宽度确实是固定的，你可以“强制”将最大宽度设置为 300px 或添加一个 overflow: hidden - 如果这是一个选项。