国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

單選框和復選框與文本的垂直居中顯示問題

yck / 2590人閱讀

摘要：故嘗試揣摩業界大牛的一些歷程，希望能得到不一樣的收獲。張鑫旭前輩的博客是很不錯的選擇之一，對這些基本技能闡述得十分透徹。本文是對其很早一篇文章復選框或單選框與文字對齊的問題的深入研究的再次實驗，畢竟瀏覽器對的支持多年來變化很大。

前言

工作三年，寫了不少代碼，也確實接觸不少技術。但是仔細回顧，卻又感一片空白，一臉茫然。故嘗試揣摩業界大牛的一些歷程，希望能得到不一樣的收獲。

張鑫旭前輩的博客是很不錯的選擇之一，對 html、css、jquery 這些基本技能闡述得十分透徹。本文是對其很早一篇文章復選框或單選框與文字對齊的問題的深入研究的再次實驗，畢竟瀏覽器對css、html的支持多年來變化很大。

單選框/復選框與文本當前的表現

使用最新瀏覽器測試，在字體小于瀏覽器默認字體大小時，chrome、safari、firefox默認已經能夠居中對齊了，ie和edge這對難兄難弟依舊出現了差強人意的效果，文字的位置偏下了：





修復

測試了原文中的方法，目前以vertical-align:middle表現最佳，其他方法在調整個別參數后也可達到效果，現整理了三個方法

以vertical-align:middle為基礎

代碼:

  input{vertical-align: middle;margin-top: -3px;margin-bottom: 0px;}

效果


以vertical-align:text-top為基礎

代碼:

  input{height:13px;vertical-align:text-top;margin-top: 2px;padding-top: 0;}

效果


新增包裹元素

代碼:

  input{vertical-align: middle;}
  span{display: inline-block;vertical-align:middle;line-height: 1.5;}

效果


點擊查看示例效果

拓展知識

經過測試、IE（ie8+）、edge、chrome、safari默認字體大小為16px，firefox默認字體大小為15px

checkbox和radio在不同瀏覽器下有不同的樣式: ie為height: 13px;width: 13px; padding:3px; edge為height:13px;width:13px;margin:3px 3px 3px 4px;; chrome為height:12px;width:12px;margin: 3px 2.895px;;firefox為height:9px;width:9px;border-width:2px;margin:3px 3px 3px 4px;;safari為heigth:12px;weight:12px;margin:3px 2px;。

持續更新地址: http://jaylin.wang/2017/radio...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112668.html

相關文章

  • 單選框和復選框與文本的垂直居中顯示問題

    摘要：故嘗試揣摩業界大牛的一些歷程，希望能得到不一樣的收獲。張鑫旭前輩的博客是很不錯的選擇之一，對這些基本技能闡述得十分透徹。本文是對其很早一篇文章復選框或單選框與文字對齊的問題的深入研究的再次實驗，畢竟瀏覽器對的支持多年來變化很大。 前言 工作三年，寫了不少代碼，也確實接觸不少技術。但是仔細回顧，卻又感一片空白，一臉茫然。故嘗試揣摩業界大牛的一些歷程，希望能得到不一樣的收獲。 張鑫旭前輩的...

    WrBug 評論0 收藏0

  • 文檔和元素的幾何滾動

    摘要：文檔和元素的幾何滾動當瀏覽器在窗口中渲染文檔時，它將會創建文檔一個視覺表現層，在哪里每個元素都有自己的位置和尺寸。通常應用程序將文檔看做元素的樹。的問題是觸發該事件的文檔元素的一個引用。 文檔和元素的幾何滾動 當瀏覽器在窗口中渲染文檔時，它將會創建文檔一個視覺表現層，在哪里每個元素都有自己的位置和尺寸。通常web應用程序將文檔看做元素的樹。 文檔坐標和窗口坐標 元素位置以像素來進行度量...

    wanghui 評論0 收藏0

  • js溫故而知新10(操作表單)——學習廖雪峰的js教程

    摘要：用操作表單和操作是類似的，因為表單本身也是樹。因此，第二種方式是響應本身的事件，在提交時作修改可以在此修改的繼續下一步注意要來告訴瀏覽器繼續提交，如果，瀏覽器將不會繼續提交，這種情況通常對應用戶輸入有誤，提示用戶錯誤信息后終止提交。 用JavaScript操作表單和操作DOM是類似的，因為表單本身也是DOM樹。 HTML表單的輸入控件主要有以下幾種： 文本框，對應的，用于輸入文本； ...

    simon_chen 評論0 收藏0

  • 【譯】HTML表單高級樣式

    摘要：示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫和拓展工具盡管在復選框和單選框上的表現力已經夠用了，但離其支持高級表單組件仍然遙遙無期。其表單部分挺有用的。 系列文章說明 原文 在本文中，我們將了解如何在HTML表單上使用CSS，為那些難于自定義的表單組件加以樣式。如前文所述，文本框和按鈕很適合使用CSS，而現在我們得來探索HTML表單樣式的那...

    caikeal 評論0 收藏0

  • 【譯】HTML表單高級樣式

    摘要：示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫和拓展工具盡管在復選框和單選框上的表現力已經夠用了，但離其支持高級表單組件仍然遙遙無期。其表單部分挺有用的。 系列文章說明 原文 在本文中，我們將了解如何在HTML表單上使用CSS，為那些難于自定義的表單組件加以樣式。如前文所述，文本框和按鈕很適合使用CSS，而現在我們得來探索HTML表單樣式的那...

    Jacendfeng 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<