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 回答