最近筆者在寫界面時遇到一個問題,給li添加border邊框選中效果的時候,發現它的兄弟元素一直抖動.發現時瀏覽器的盒模式計算增加了元素的width
找了很多資料,說是給li元素添加box-sizing屬性,結果還是不行
box-sizing屬性是css3爲了改善盒模型定義的,該屬性能事先定義盒模式的尺寸解析方式,
box-sizing:content-box|border-box|inherit;
content-box:width/height=border+padding+content;
border-box:width/height=content
IE怪異模式(Quirks)雖然不規範,但是在變更border時不會重新計算大小.但是標準模式下會重新計算大小.所以想起來border的透明屬性找到解決方法了
border:2px solid transparent
這樣就不會改變盒子的大小了
解決方法最後這樣子,給border添加透明邊框,這樣子只是改變了邊框的顏色而已
