YUI重置CSS使这个无法工作。

Question

YUI重置CSS使这个无法工作。

12

我在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 样式又将其变回了普通字体。我该如何解决？

我的规则使它加粗，但YUI的规则会使其恢复正常。如何解决？

- Patrick McElhaney

10个回答

7

我会使用这个规则来覆盖YUI重置：

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

em, i, em *, i *
{
  font-style: italic;
}

- travis

6

如果除了使用YUI reset.css之外，您还使用了YUI base.css，则您将拥有一组标准的跨浏览器基本样式。

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

- Ricky

YUI基础库并不能解决这个问题。它可以将文本加粗、斜体，但无法解决在同时使用这两种标签时的冲突。 - Patrick McElhaney

3

当我在我的基础CSS文件的顶部添加YUI Reset时，遇到了类似的问题。我发现对我最好的方法是简单地删除所有

font-weight: normal;

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

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

- alexp206

2

只要您的样式表在重置样式表之后加载，它们就应该能够正常工作。这是哪个浏览器？因为我自己也是以类似的方式工作，但我没有遇到这个问题，我想知道是否是我的测试有问题。

- sparkes

2

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

- Chris Marasti-Georg

2

正如Chris所说，你不必完全遵循他们提供的CSS。我建议你将其保存到你的服务器上，并根据自己的需求进行编辑。

- Ķėvin

1

我建议避免任何涉及黑客YUI文件的事情。您需要能够在将来更新外部库，如果您的网站依赖于编辑版本，则很有可能会出现问题。我认为这是您使用任何第三方库的一般最佳实践。

因此，我认为this的答案是比较好的之一

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

- Flubba

0

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

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

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

很遗憾，Internet Explorer不支持“inherit” :-(

- Patrick McElhaney

0

我明白你的意思。我想你可以添加一个类似这样的CSS规则：

strong em { font-weight: bold; }

或者：

strong * { font-weight: bold; }

- Ricky

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- palmsey · Accepted Answer

如果你的 strong 声明在 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>

YUI重置CSS使<strong><em>这个无法工作</em></strong>。