YUI重置CSS使其不起作用

时间:2020-03-05 18:41:33  来源:igfitidea点击:

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;
}

当我同时具有emstrong的文本时,就会出现问题。

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

我的" strong"规则使其变粗,但YUI的" em"规则使其恢复正常。我该如何解决?

解决方案

回答

如果强烈声明在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重置:

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

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

回答

如果除了使用YUI reset.css之外,还使用YUI base.css,则将全部设置为一组标准的跨浏览器基本样式。

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

回答

当我将YUI重置添加到库存CSS文件的顶部时,我遇到了类似的问题。我发现对我来说最好的方法是简单地删除所有

font-weight: normal;

YUI Reset中的声明。我还没有注意到这影响了任何"跨浏览器"。

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

回答

重置样式表最好用作基础。如果我们不想重置em或者strong,请从样式表中将其删除。

回答

就像Chris所说的那样,我们不必认真地使用它们提供的确切CSS。我只是将副本保存到服务器,然后根据需要进行编辑。

回答

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

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

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

不幸的是,Internet Explorer不支持"继承"。 :-(

回答

我建议避免使用任何涉及对YUI文件进行黑客攻击的方法。我们将来需要能够更新外部库,并且如果站点依赖于已编辑的版本,则很有可能会出现问题。我认为这对于我们使用的任何第三方库都是普遍的良好做法。

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

If in addition to using YUI reset.css, you also use YUI base.css, then you will be all set with a standard set of cross browser base styles.

回答

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

strong em { font-weight: bold; }

或者:

strong * { font-weight: bold; }