0

H1タイトルタグのリボンを作成しました。Chrome、Safari、IE9ではすべて正常に動作しているようですが、Firefoxでは何らかの理由で機能しません。

Firefoxでの外観のスクリーンショットは次のとおりです。

ここに画像の説明を入力してください

H1タグのCSSは次のとおりです。

#home .content h1 {
text-align: left;
position: relative;
color: #fff;    
margin: 0 -25px 20px -30px;
padding: 5px 0; 
background: #939393;
text-indent: 30px;
font: 1.3em 'Oswald', sans-serif;
}

#home .content h1:before {
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
bottom: -10px;
border-width: 0px 10px 10px 0px;
border-right-color: #464646;
left: 0px;  
}

私はもう試した

overflow: hidden;

しかし、それはうまくいかないようです。

私も試しました

-moz-box-sizing: border-box;

しかし、それでも何も解決されなかったようです

マージンとパディングのいくつかもいじりましたが、FFでは何も変わらないようです。

このサイトへのリンクは次のとおりです（現在はデモとして）： http ：//dev.boostmktg.com/oas

助言がありますか？

4

1 に答える 1

1

text-indentがリボンの「シャドウ」を30ピクセル右に押しているように見えます。

テキストインデントを削除し、h1の左パディングを30pxにすることで、Firefoxで機能させることができました。

最終的なcssは次のようになります。

#home .content h1 {
text-align: left;
position: relative;
color: #fff;    
margin: 0 -25px 20px -30px;
   /* add left padding of 30 pixels */ 
padding: 5px 0 5px 30px; 
background: #939393;
   /* no need for this text-indent: 30px; */
font: 1.3em 'Oswald', sans-serif;
}

#home .content h1:before {
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
bottom: -10px;
border-width: 0px 10px 10px 0px;
border-right-color: #464646;
left: 0px;  
}
于 2013-02-12T19:42:45.613 に答える