フォントのベースラインにアイコンを揃える

こんにちは この短い記事では、フォントベースライン上でアイコンをクロスブラウザで配置する方法を説明します。 したがって、一見したところタスクは非常に簡単です。デザイナーが送信したレイアウトには、非常に標準的な次のブロックがあります（ユーザーがサイトにログインした後のヘッダーのユーザー名）











ためらうことなく、単純なマークアップとCSSを作成します。



HTML

<div class="user"> <span class="user-icon"></span> <span class="user-name">User Name</span> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSS

 .user-icon { width: 23px; height: 20px; background: url('person.png'); display: inline-block; margin-right: 3px; } .user-name { font-size: 14px; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、すべてのブラウザでページを開き、すべてのインライン要素とインラインブロック要素がデフォルトでフォントのベースラインに揃えられるため、すべてがどこでも正常に機能することを確認します。 ただし、通常のIEは驚きです。 IE6はすでに暗闇の中で息づいていることを理解していますが、これまでのところIE7を考慮する必要があり、上記のコードだけが次のようにレンダリングされます。







この動作の理由は正確にはわかりませんが、これはおそらくIE6-7のinline-blockプロパティの表示の不正な操作によるものです。

さらに、背景を持つスパンの代わりに通常の画像を配置すると、すべてが完全に整列しますが、すべてのアイコンがスプライトに縫い付けられているため、このソリューションは私たちには適していません。これにより、通常の画像を使用できなくなります。

解決策は非常に迅速に提供されました。スパンに別の空のスパンを押し込むだけで、サイズに関係なくブロック全体がベースラインに沿って強制的に配置されます。

そして、HTMLは次のようになります。

 <div class="user"> <span class="user-icon"><span></span></span> <span class="user-name">User Name</span> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それだけです ご清聴ありがとうございました。

更新しました。 1

なぜテキストを単なるスパンとしてではなく、個別の要素としてアイコンを配置するのか理解できない人のために、私は説明します：



1.最初に、背景の決定は線の高さに依存します。 アイコンの高さが線の高さより大きい場合、切り取られます。 また、線の高さは、100％確実ではないような値です。 さまざまな状況、さまざまなブラウザ、さまざまなプラットフォームで、まったく異なる方法で計算できます。



2.次に、行の高さはフォントサイズとヘッドセットに依存します。 したがって、ユーザーが設定でフォントサイズを突然変更した場合、すべての位置はすぐに地獄に落ちます。