火狐也有不标准的时候

按照W3C写了这么一段代码
Html代码

1. <div style="overflow:scroll; width:50px; padding-right:20px;">  
   
2.     <input type="button" style="width:80px;"/>  
   
3. </div>  
   
4. 
   
5. <div style="overflow:scroll; width:50px; padding-right:20px;">
   
6.         <input type="button" style="width:80px;"/>
   
7. </div>

复制代码

所有浏览器的显示效果都一样，唯独FF的padding-right不见了，如果知道解决方法的朋友，望告知，感谢。
其实FF的padding不是不见了，只不过没有给BUTTON留padding。
我正在找原因，希望大家能一起解决。

是挺费解，期待有人能回复。
似乎跟UA解释block,inline元素有关。

你的div才50px，button80px，Firefox就没有padding了，你设置宽点就有了。

那要overflow有啥用。。。。

具体原因不知。但各种浏览器之间对scroll bar 的效果显示确实有差距。解决方案有一个：
<div style="overflow:scroll; width:50px; padding-right:20px;">
<div style="width:80px;"><input type="button" style="width:100%;" /></div>
</div>
这样子可以试一下。

猜测原因大约是div内元素80px > (50+20)px引起的。导致内部元素“撑开”外面的div。而因为有了overflow: scroll属性，使得内部元素显示完整，没有被“截断”。至于这个bug，我认为也不只是firefox不合群的问题。inline样式的标签一般是不能支持width属性的。可能input是比较特殊的标签。在原来代码基础上如果把input设置成block形式的。在chrome下，右侧的内边距也会不见的。我只是个人认为，这应该是比较正常的解释方式。也不算是ff的“不合群”吧……
一切均为个人猜测。。期待高手的正确解释。

把它设成button的margin而不是div的padding

不要以偏盖全，一点不足以说明问题，ie 不合群也绝不是空穴来风！

在遵守W3C的标准前提下，实例代码确实是W3C标准的，为何FF和其他浏览器效果不一样？
我只是伪标题来反感一下FF而已，说的有点大了。抱歉

有趣的测试，让我们了解了在一些极端情况下，号称标准的也不能尽信

喜欢啥用啥

客户用啥，用啥给人测试呗