selectでの文字垂直中心の解決方法
3867 ワード
各ブラウザにおけるselectタグの属性と各ブラウザのサポートがそれぞれ異なることを知っています.これにより、select選択ボックスの各ブラウザでの表示が異なります.次に、主な外形CSS属性のサポートを通じて、全互換性selectを構築します.
私はselectのheight、padding、line-heightに対してそれぞれ変数を制御する方法を利用してDEMOを書いて各ブラウザの上で3種類の情況をテストします:height.100.padding.0、height.no.padding.100、no.height.No.padding,結果リンク画像の各ブラウザDEMO外観
以下の研究属性を得ることができる.
ie6
ie7
ie8
ie9
ff
ch
sf
op
既定の高さ
22px
22px
19px
20px
19px
19px
height
F
T
T
T
T
T
F
T
padding
F
F
T
T
T
T
F
T
line-height
F
F
F
F
F
F
T
F
テキストを垂直方向に中央揃え
T
T
T
F
F
T
T
T
上記の研究成果属性の要約から,IE 6はいずれの設定も固定高さ22 pxで不変であり,他のブラウザはsafariを除いてheight属性をサポートしていることが分かったので,height:22 pxを設定した.では、safariブラウザを修正します.safariだけがline-height属性をサポートしていることを発見しました.それでは、line-heightを利用して高さ22 pxを修正することができます.font-sizeが12 pxであることを前提にline-height:22 pxを設定します.最後にFFとIE 9の中の文字が中央ではありません.padding:2 px 0を設定します.FFとIE 9が中央にあることを発見しました.しかし、各ブラウザのselectの高さも増加していないので、ここでは疑問ですが、高さ設定の場合、小数のpaddingは全体の高さを増加させませんか?
次に、フル互換コードの例を示します.
また、幅や高さを設定したり、各ブラウザで互換性のある効果を実現したりしたい場合は、jsを使用してドロップダウン効果を行ったほうがいいです.これはselectラベルとは関係ありません.
さっき京東と淘宝の右側のチャージエリアを参考にしましたが、淘宝はjs効果で実現したドロップダウン効果を使用しています.京東はselectを使用していますが、その高さは20 px程度なので文字の効果は垂直中央に見えますが、Googleでは高さ文字を変えるか中央にするかを見ることができますが、FFでは文字が偏っているので、selectを使うなら上記の互換性で書いたほうがいいでしょう.
参照先:http://www.kuqin.com/webpagedesign/20120228/318485.html
私はselectのheight、padding、line-heightに対してそれぞれ変数を制御する方法を利用してDEMOを書いて各ブラウザの上で3種類の情況をテストします:height.100.padding.0、height.no.padding.100、no.height.No.padding,結果リンク画像の各ブラウザDEMO外観
以下の研究属性を得ることができる.
ie6
ie7
ie8
ie9
ff
ch
sf
op
既定の高さ
22px
22px
19px
20px
19px
19px
height
F
T
T
T
T
T
F
T
padding
F
F
T
T
T
T
F
T
line-height
F
F
F
F
F
F
T
F
テキストを垂直方向に中央揃え
T
T
T
F
F
T
T
T
上記の研究成果属性の要約から,IE 6はいずれの設定も固定高さ22 pxで不変であり,他のブラウザはsafariを除いてheight属性をサポートしていることが分かったので,height:22 pxを設定した.では、safariブラウザを修正します.safariだけがline-height属性をサポートしていることを発見しました.それでは、line-heightを利用して高さ22 pxを修正することができます.font-sizeが12 pxであることを前提にline-height:22 pxを設定します.最後にFFとIE 9の中の文字が中央ではありません.padding:2 px 0を設定します.FFとIE 9が中央にあることを発見しました.しかし、各ブラウザのselectの高さも増加していないので、ここでは疑問ですが、高さ設定の場合、小数のpaddingは全体の高さを増加させませんか?
次に、フル互換コードの例を示します.
xmlns="http://www.w3.org/1999/xhtml">
>
http-equiv="Content-Type" content="text/html; charset=utf-8" />
<span style="color:rgb(17,119,0);">></span>demo<span style="color:rgb(17,119,0);"/> >
>
>
>
style="margin-top:20px; margin-left:20px; background:#000">
>
>
>
>また、幅や高さを設定したり、各ブラウザで互換性のある効果を実現したりしたい場合は、jsを使用してドロップダウン効果を行ったほうがいいです.これはselectラベルとは関係ありません.
さっき京東と淘宝の右側のチャージエリアを参考にしましたが、淘宝はjs効果で実現したドロップダウン効果を使用しています.京東はselectを使用していますが、その高さは20 px程度なので文字の効果は垂直中央に見えますが、Googleでは高さ文字を変えるか中央にするかを見ることができますが、FFでは文字が偏っているので、selectを使うなら上記の互換性で書いたほうがいいでしょう.
参照先:http://www.kuqin.com/webpagedesign/20120228/318485.html