在Firefox中的CSS功能區中斷

Question

我爲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

有什麼建議？

Answer 1

它看起來像文本縮進正在推動你的功能區「陰影」30像素的權利。

我設法得到它在Firefox工作通過刪除文本縮進，並給予30像素

最終CSS的H1左填充看起來是這樣的：

#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; 
}