wordpress 上的 CSS 在使用 Chrome 或 Safari 时不正常

Question

我正在为客户 www.afterthemagic.com(略有 NSFW)制作的网页在 Firefox 和 IE 中看起来不错，但我无法在 Chrome 或 Safari 中正常显示。我试图在 style.css 中的以下元素中使用不同的变量，但似乎无法实现。

#banner-text .left span {
font-size: 96px;
font-style: normal;
text-transform: uppercase;
position: static;
}

关于如何使“THE”文本在 Chrome 或 Safari 中看起来不错的任何指示？谢谢!

Answer 1

我认为您对这种布局的处理不正确。

从语义上讲，您不应将 H1 标题与“开始阅读”链接组合在一起。

您的标题、“开始阅读”和作者小节应该独立 float 和设置样式。否则，我不确定你所说的“看起来正确”是什么意思。您的 h1 标题的字体大小为 200px，而您的 h1 .left span 的字体大小为 96px。如果您指的是文本对齐方式，请尝试:

#banner-text h1 .left span {
  display:inline-block;
  margin:0 0 10px 0;
  font-size: 96px;
  font-style: normal;
  text-transform: uppercase;
}

调整边距，直到获得所需的对齐方式。

这是更好地理解 CSS“显示”属性的好资源: http://css-tricks.com/almanac/properties/d/display/