11

YUI 的Reset CSS中的这一行给我带来了麻烦：

address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
    font-weight: normal;
}

它使我的em不是斜体，我的strong不是粗体。没关系。我知道如何在我自己的样式表中覆盖它。

strong, b 
{
  font-weight: bold;
}

em, i 
{
  font-style: italic;
}

当我的文本同时为em和时，问题就出现了strong。

<strong>This is bold, <em>and this is italic, but not bold</em></strong>

我的规则strong使其粗体，但 YUI 的规则em使其再次正常。我该如何解决？

4

10 回答 10

18

如果你的强声明出现在 YUI 之后，你应该覆盖它。你可以像这样强制它：

strong, b, strong *, b * { font-weight: bold; }
em, i, em *, i * { font-style: italic; }

如果您仍然支持 IE7，则需要添加!important.

strong, b, strong *, b * { font-weight: bold !important; }
em, i, em *, i * { font-style: italic !important; }

这行得通 - 自己看看：

/*YUI styles*/
address,caption,cite,code,dfn,em,strong,th,var {
  font-style: normal;
  font-weight: normal;
}
/*End YUI styles =*/

strong, b, strong *, b * {
  font-weight: bold;
}

em, i, em *, i * {
  font-style: italic;
}
 <strong>Bold</strong> - <em>Italic</em> - <strong>Bold and <em>Italic</em></strong>

于 2008-08-21T14:39:10.810 回答
7

我将使用此规则来覆盖 YUI 重置：

strong, b, strong *, b *
{
  font-weight: bold;
}

em, i, em *, i *
{
  font-style: italic;
}
于 2008-08-21T14:46:44.723 回答
6

如果除了使用 YUI reset.css 之外，您还使用了 YUI base.css，那么您将使用一套标准的跨浏览器基本样式集。

链接：http: //developer.yahoo.com/yui/base/

于 2008-08-21T14:49:52.767 回答
3

当我将 YUI 重置添加到我的股票 CSS 文件的顶部时，我遇到了类似的问题。我发现对我来说最好的事情就是简单地删除所有

font-weight: normal;

YUI 重置的声明。我没有注意到这影响了任何“跨浏览器”。

我所有的声明都是在 YUI 重置之后，所以我不确定为什么它们没有生效。

于 2008-08-21T14:58:44.180 回答
2

只要您的样式是在重置样式之后加载的，它们就应该可以工作。这是什么浏览器？因为我自己以类似的方式工作并且我没有遇到这个问题我想知道这是否是我的测试中有问题。

于 2008-08-21T14:39:43.023 回答
2

重置样式表最好用作基础。如果您不想重置 em 或 strong，请将它们从样式表中删除。

于 2008-08-21T15:13:15.627 回答
2

正如 Chris 所说，您不必使用他们虔诚地提供的确切 CSS。我只需将副本保存到您的服务器，然后根据您的需要进行编辑。

于 2008-08-21T15:16:54.527 回答
1

我建议避免任何涉及破解 YUI 文件的事情。您将来需要能够更新外部库，如果您的站点依赖于编辑版本，那么它很有可能会被破坏。我认为这对于您使用的任何 3rd 方库来说都是一般的良好做法。

所以我认为这个答案是更好的答案之一

如果除了使用 YUI reset.css 之外，您还使用了 YUI base.css，那么您将使用一套标准的跨浏览器基本样式集。

于 2008-08-21T15:56:58.657 回答
0

我以为我有一个理想的解决方案：

strong, b 
{
  font-weight: bold;
  font-style: inherit;
}

em, i 
{
  font-style: italic;
  font-weight: inherit;
}

不幸的是，Internet Explorer 不支持“继承”。:-(

于 2008-08-21T15:35:51.407 回答
0

我明白你在说什么。我想你可以添加这样的 CSS 规则：

strong em { font-weight: bold; }

或者：

strong * { font-weight: bold; }
于 2008-08-21T18:32:40.703 回答