更新时间:2022-10-19 13:56:51
这是我最近注意到的问题:
如果声明了一个正确的doctype(与Microsoft boxmodel相矛盾,那么可以通过使用quirks-mode触发),W3C引入的默认boxmodel是 content-box
然而,最近我注意到,浏览器有UA样式声明 box-sizing:border-box
(仅适用于输入元素?)。这就是为什么你的诡计不工作,因为边界被考虑到宽度。要解决这个问题,你必须声明 box-sizing:content-box
。请参见此问题处理同样的问题。
Playing with css border, margin, padding and width I came across an extra pixel...
I know that the total width and height of an element is the sum of its width, border, margin and padding.
If you look at this http://jsfiddle.net/Fs8HQ/ , everything seems to work. When you click the button, moving some pixels from the border to the margin create a pseudo-animation.
Now let's set a fixed width and height in http://jsfiddle.net/Fs8HQ/1/ (remove width and height from :active): in Firefox and Chrome there is one extra-height and one extra-width pixels that move all the adjacent elements. in Opera there is one extra-width and two extra-height pixels. Where they come from?
But here http://jsfiddle.net/hJTpY/ moving the pixel from the border to the padding seems to fix everything, but the pseudo-animation is not the same.
In the first two fiddles the borders are reduced approaching to content; in the last one the borders are reduced by the contents that expands.
Why does that happen? I'm missing something?
This is a problem I noticed lately:
The default boxmodel introduced by the W3C is content-box
if a proper doctype is declared (in contradiction to the Microsoft boxmodel which can be triggered by using quirks-mode in IEs).
However, lately I noticed that the browsers have UA-styles which declare box-sizing:border-box
(for input-elements only?). That is why your trick does not work, because the border is accounted into the width. To fix this, you have to declare box-sizing:content-box
. See this question dealing with the same problem.