在把a, span等標籤做成Button按鈕樣式時,為什麼和普通button高度差一個像素?
&
&
&
&
&Demo Page&
& &
&
&
&Anchor Tag&
&
&Span Tag Button&
&
&
&
上面是看代碼
下面是截圖1:高度為什麼差一個像素:2:應該怎麼改?測試環境是Chrome.
update:我把其中.hey-btn-default樣式更新成:.hey-btn-default { font-size: 18px; padding: 8px 10px; }好像就解決了,可是為什麼使用em就出上上述問題呢?Pixel是計算機上能顯示的最小單位,然後你用em,1em=16px;
1.1em、0.9em什麼的都得換算成Pixel顯示,那麼換算出來都是些什麼破玩意兒?你能在顯示器上顯示一條半個像素寬的線嗎?不行吧,於是各種瀏覽器會對你這帶小數值的高度做一些奇怪的處理:有的直接四捨五入,例如人類大救星微軟的IE,因此IE下是正常的;一個21px高、一個20px高、21px高、一個20px高
掐指一算,wow,平均高度恰好是20.5px!(至於哪個高哪個低那就是瀏覽器定義的事了)
(Chrome下效果)所以究其根本,還是你拉了屎,瀏覽器替你擦屁股,不同瀏覽器擦的姿勢各不相同。最後,請精確到像素,別再做這種類似 i+++++i 的事了。如果要用em,請精確一點!你要的.hey-btn-default { font-size: 18px; padding: 8px 10px; }應該是.hey-btn-default { font-size: 1.25em; padding: 0.5em 0.625em; }
一切正常Mark……看了一通,預計是font-size轉換為像素時的取整問題?也有可能是box-sizing屬性的問題……比較菜,還得回去看看……方便大家直接看效果,可以戳-&>http://runjs.cn/detail/rfh6dir7對了,在firefox中:IE10、11中則沒有問題:
我試了一下,下面是我個人的思考和見解:
首先,瀏覽器對於精度的計算和處理規則是不同的,之前就遇到過 33.33333% 在桌面版瀏覽器正好三列,在移動端也是三列但是會有縫隙(計算精度不夠)。上面有回答稱是因為精度問題,這是不準確的,因為同一個瀏覽器針對精度的處理規則肯定是一樣的。
就匿名回答的那個例子,四個容器的高度:一個21px高、一個20px高、21px高、一個20px高。從放大圖很容易就可以看出來,它們四個是一樣高度的,只不過 input 和 button 向下偏移了一px,上面空出了 1px 因此也覆蓋了下面 1px 的邊框。
因此,計算精度可能是一個因素(因為使用偶數 px 或者計算出來整數的 em 是正常的),但只是一個因素而已。
=======
使用了 display inline-block,又是高度上的問題,很顯然想到了 vertical-align 屬性,對於這個問題,並不需要調整 em 尺寸等,只需要設置一條統一的,非 baseline 的值即可,例如:
.hey-btn{
vertical-align: top;
}
可以看下這個 DEMO :Edit fiddle - JSFiddle。
那產生這個問題還有其他因素么?首先我們得先搞清楚瀏覽器是怎麼渲染這個的。
標籤就是一個代碼而已,雖然只是毫無樣式的代碼,我們也不為其添加任何 CSS,打開的時候缺已經帶有一些效果了(例如 h2 很大很黑)。每一個標籤都有一個默認的、瀏覽器賦予的樣式,就是 User Agent Stylesheet,而 a、span 和 input、button 在 Chrome 的默認 User Agent Stylesheet 是不一樣的,使用 DevTools 根據計算出來的樣式對比,一個 input 比 a 的 CSS 樣式,多出了:
-webkit-appearance: none;
-webkit-rtl-ordering: logical;
-webkit-user-select: none;
-webkit-writing-mode: horizontal-tb;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: normal;
line-height: normal;
text-indent: 0px;
text-rendering: auto;
text-shadow: none;
text-transform: none;
word-spacing: 0px;
writing-mode: lr-tb;
我懷疑是否是因為這些屬性導致的這個 BUG。於是,我進行了測試,將這段標籤同樣追加到 a、span 中,但是效果沒有。之後又在 Firefox、Safari 瀏覽器測試,發現不同瀏覽器的顯示效果不太一樣(Safari 顯示正常,Firefox 中 a、span 計算的高度比 input、button 矮2px)。因此,我推斷:這個問題是由於瀏覽器渲染產生的,屬於兼容性問題或許是 BUG。
也有可能是 display: inline-block; 產生的。這些元素默認是 inline 元素,默認就是在一行,如果去掉 display: inline-block; 你會發現 btn 會有輕微的上移。那麼我們測試,改用 float 的方式試下,結果是正常的,Demo:Edit fiddle - JSFiddle
因此,可以得出結論,這個問題出現的原因就是:由於計算出來的尺寸數值,導致某些瀏覽器在渲染 display: inline-block; 元素的時候,產生了異常。
PS1:Webkit/Blink 內核瀏覽器渲染的還不算離譜,至少它們高度一致,但是 Firefox 渲染出來的高度居然不一致,醉了。
PS2:這個問題沒有實際意義,實際開發中,通常會統一使用某類結構做按鈕,其次也可以通過 float 來解決。PS3:至於 display inline-block 是否是真兇,我也只是推斷,反正我不用 display inline-block,真相或許 @一絲 知道,他是 inline-block 粉。原理我不清楚,但是我知道是border的問題
根據你這個問題,建議你打開開發工具自己看看,說別的我對不齊自己!
我想問個問題,要是把.hey-btn-default中的屬性放到.hey-btn中,有什麼區別
em.....0.9......這也行····
推薦閱讀:
※請問本地的html文件如何生成網頁文件?
※字元編碼:計算機的巴別塔
※打造網頁版「大白」
※【技術】一個 HTML 模板工具 - Pug
※詳解DOM元素寬高和相對位置的一些方法