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像素。

我设法通过删除文本缩进并使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;  
}