こんにちは仲間のウェブデザイナーとウェブデザイナー志望者。
私は自分の問題の解決策を見つけようとしましたが、CSS と呼ばれるものにまったく慣れていないため、デザインを互換性のあるものにするという点で、ここで探しているものを正確に知るのは少し圧倒されます.
div内に配置しているテキスト:
http://jsfiddle.net/tsaulic/W22DC/67/
<div id="header-social-icons"><a href="http://test">C</a><a href="http://test">M</a><a href="http://test">F</a></div>
そして私のCSS
#header-social-icons {
position: relative;
float: right;
width: 90px;
height: 30px;
margin: auto;
padding: 0;
font-family: "Social Logos";
text-align: right;
font-size: 24px;
}
Chrome/Safari では同じようにレンダリングされますが、Firefox ではレンダリングが異なります。Chrome と Safari はどちらも div コンテナーの下部に近い位置に配置し、Firefox はその反対 (上部) に配置します。http://www.quirksmode.org/css/clearing.htmlのソリューションを使用してみましたが、normalize.css (2.1.1) も使用しています。
これらの両方を使用しても、問題が悪化したり改善されたりすることはありません。
私は何が欠けていますか？マージンを使用して、フォント サイズを小さくし (オーバーフローの問題ではありません)、div コンテナーの高さを大きくしてみました。:(
コンテナ内のテキストを垂直方向に中央揃えにしたいと考えています。どちらのブラウザでも中央に配置されていません。
助けてください。
別のメモ: 他のすべてのヘッダー div は、すべてのブラウザーで同じように表示されます。ただし、Firefox よりも Chrome/Safari で 2px 低く配置されている検索フィールドの 1 つを除きます。
ただの更新:問題が何であるかを明確にするために...アナマリアが提案したように、自分の高さと同じ行の高さの値を追加する必要がありました。
そのようです：
height: 24px;
line-height: 24px;