0

両側に2つの境界線があるタブがあります。境界線は、その中にあるツールバーを埋める必要があります。これを実現するには、パディングを使用しました。Chrome、IEなどでは、ツールバーを埋めるために上下のパディングを9ピクセルに設定する必要がありますが、Firefoxでは4ピクセルにする必要があります。

これは、ツールバーのモックアップが追加されたjsfiddleです。

マークアップは非常に単純です。

<a href="Discover">
  <span class="navButton">
    Discover
  </span>
</a>

cssからトランジションやその他の不要なスタイルを削除しました。

.navButton {width:50px; border-right-color:#171717; 
            border-right-width:1px; border-right-style:solid;
            position:relative; 
            padding-left:10px; padding-right:10px; 
            padding-top:9px; padding-bottom:9px;
           }
4

3 に答える 3

0

私はフィドルを持っていました、そしてそれは今うまくいきます。私はそれを設定しdisplay: inline-block、周りのパディングと位置を変更しました。

于 2012-08-14T00:39:38.257 に答える
0

display:inline-blockここでは非常に適切です（少なくとも、コードの残りの部分を見ずに合理的な提案）。タブのキャプションが50pxよりも広いため、幅の宣言も削除する必要があります。これは、インラインでレンダリングされた要素（<span>デフォルトdisplayのプロパティを含む）に寸法を適用できないためです。

このフィドルでうまく機能します

于 2012-08-14T08:43:35.837 に答える
-1

Spanはデフォルトでインライン要素であり、ブロック要素とはまったく異なるパディングを処理する可能性があります。設定してみてください：

.navButton {
    display: block;
}

結果を確認します。

一般に、CSSリセットスクリプト（Googleの場合）を含める必要があります。

于 2012-08-13T23:47:23.327 に答える