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

資訊專欄INFORMATION COLUMN

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

WrBug / 2438人閱讀

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

前言

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

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

單選框/復(fù)選框與文本當(dāng)前的表現(xiàn)

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





修復(fù)

測試了原文中的方法，目前以vertical-align:middle表現(xiàn)最佳，其他方法在調(diào)整個(gè)別參數(shù)后也可達(dá)到效果，現(xiàn)整理了三個(gè)方法

以vertical-align:middle為基礎(chǔ)

代碼:

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

效果


以vertical-align:text-top為基礎(chǔ)

代碼:

  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;}

效果


點(diǎn)擊查看示例效果

拓展知識(shí)

經(jīng)過測試、IE（ie8+）、edge、chrome、safari默認(rèn)字體大小為16px，firefox默認(rèn)字體大小為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;。

持續(xù)更新地址: http://jaylin.wang/2017/radio...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/51452.html

相關(guān)文章

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

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

    yck 評論0 收藏0

  • 文檔和元素的幾何滾動(dòng)

    摘要：文檔和元素的幾何滾動(dòng)當(dāng)瀏覽器在窗口中渲染文檔時(shí)，它將會(huì)創(chuàng)建文檔一個(gè)視覺表現(xiàn)層，在哪里每個(gè)元素都有自己的位置和尺寸。通常應(yīng)用程序?qū)⑽臋n看做元素的樹。的問題是觸發(fā)該事件的文檔元素的一個(gè)引用。 文檔和元素的幾何滾動(dòng) 當(dāng)瀏覽器在窗口中渲染文檔時(shí)，它將會(huì)創(chuàng)建文檔一個(gè)視覺表現(xiàn)層，在哪里每個(gè)元素都有自己的位置和尺寸。通常web應(yīng)用程序?qū)⑽臋n看做元素的樹。 文檔坐標(biāo)和窗口坐標(biāo) 元素位置以像素來進(jìn)行度量...

    wanghui 評論0 收藏0

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

    摘要：用操作表單和操作是類似的，因?yàn)楸韱伪旧硪彩菢洹Ｒ虼耍诙N方式是響應(yīng)本身的事件，在提交時(shí)作修改可以在此修改的繼續(xù)下一步注意要來告訴瀏覽器繼續(xù)提交，如果，瀏覽器將不會(huì)繼續(xù)提交，這種情況通常對應(yīng)用戶輸入有誤，提示用戶錯(cuò)誤信息后終止提交。 用JavaScript操作表單和操作DOM是類似的，因?yàn)楸韱伪旧硪彩荄OM樹。 HTML表單的輸入控件主要有以下幾種： 文本框，對應(yīng)的，用于輸入文本； ...

    simon_chen 評論0 收藏0

  • 【譯】HTML表單高級樣式

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

    caikeal 評論0 收藏0

  • 【譯】HTML表單高級樣式

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

    Jacendfeng 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<