谷歌浏览器将 h1 标签格式化为小 [关闭]答案

【问题标题】：Google Chrome formats h1 Tag way to small [closed]谷歌浏览器将 h1 标签格式化为小 [关闭]
【发布时间】：2012-12-02 22:07:38
【问题描述】：

我遇到了 chrome 的问题。 h1 标签的格式比 IE 和 FF 中的要小。这里有2个截图：

我不知道为什么会这样。你有？抱歉，我不想在这里发布 URL，因为它不应该被谷歌索引。但它是e。 G。像 ssd[减号]vergleichen.de/ssds/technische-daten/881/ocz-vector-128gb-2,5-Zoll.html （只需 C+P 并将 [减号] 替换为 -）。

编辑：这是代码：

#producttitlecontent {
padding: 6px;
margin: 2px;
background: #FDE5CA;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}

#producttitlecontent h1 {
text-align: center;
color: #686868;
padding: 4px;
font-size: 1.7em Verdana;
}


<div id="producttitlecontent">
                       <img src="../images/bkbtn.png" alt="Zur&uuml;ck"    onClick="history.go(-1);return true;">
                        <h1 itemprop="name">OCZ Vector 128GB 2,5"(VTR1-25SAT3-128G) </h1>
           </div>

【问题讨论】：

它与 Chrome 无关，与您的 CSS 完全有关。

标签： firefox google-chrome css cross-browser

【解决方案1】：

用户代理 (Chrome) 内置样式表如下所示：

any(article,aside,nav,section) h1 {
font-size: 1.17em;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
}

因此，您放置它的 section 标记会导致此问题。无论如何你可以避免使用section标签吗？我知道这并不理想，但我只是在解释发生了什么。

如果将 h1 标签移到部分标签之外，它会以更大的尺寸显示（我试过了）。

【讨论】：

【解决方案2】：

我同意@j08691 的观点，他对您的原始帖子发表了评论，并跟进提到了inherited 值。这很可能发生在您的正文或包含元素上，甚至在文档级别的某个地方，您已经在“主”元素上定义了 font-size，并且由于您使用了 em（但不限于）。主元素中的每一层都将基于其进入的父元素的字体大小，因此外部的 1.7em 在内部更小，内部更小，内部更小，并且值会根据其父元素计算的大小继续继承。

【讨论】：

【解决方案3】：

我想我自己解决了。解决方案非常简单，我什至不敢发布它。我写了

font-size: 1.7em Verdana;

捂脸！还是谢谢大家收看这个

【讨论】：