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