覆盖为无序列表提供 1em 边距的用户代理 CSS 样式表规则的最佳方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4873867/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the best way to override a user agent CSS stylesheet rule that gives unordered-lists a 1em margin?
提问by John
I'm working on a web app that has a topBar similar to facebook's blue bar at the top. I have an unordered list within the div of that bar to list some items, like Inbox, Notifications, etc. The UL has a 1em margin as defined by the user agent stylesheet of my browser. This is a problem because it's pushing my topBar down 1em. How can I override this to make the border of the ul = 0? I've read that overriding user agent stylesheets is a bad idea so I'm curious to learn what is best to do. Thanks.
我正在开发一个 web 应用程序，它的顶部栏类似于 facebook 顶部的蓝色栏。我在该栏的 div 中有一个无序列表，用于列出一些项目，如收件箱、通知等。 UL 有一个 1em 边距，由我的浏览器的用户代理样式表定义。这是一个问题，因为它把我的 topBar 推低了 1em。如何覆盖它以使 ul = 0 的边界？我读过覆盖用户代理样式表是一个坏主意，所以我很想知道什么是最好的。谢谢。
EDIT: Here's the CSS file:
编辑：这是CSS文件：
body {
margin:0px;
padding:0px;
}
#topBar{
background-color:#CCCCCC;
height: 50px;
width:100%;
z-index:-1;
}
#mainNav{
margin:0 auto;
width:900px;
}
#logo{
float:left;
}
#mainNav ul li{
float:left;
border:0px;
margin:0;
padding:0;
font-size:10px
}
And the html:
和 html：
<!DOCTYPE html>
<html>
<head>
<title>ff</title>
<%= stylesheet_link_tag :all %>
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
</head>
<body>
<div id="topBar">
<div id="mainNav">
<div id="logo"><%=image_tag("livecove.jpg") %></div>
<ul>
<li>Inbox</li>
</ul>
</div>
</div>
<%= yield %>
</body>
</html>
采纳答案by Michael Robinson
If You Are Ableto Edit the Offending Stylesheet
如果您能够编辑违规样式表
If the user-agent stylesheet's style is causing problems for the browser it's supposed to fix, then you could try removing the offending style and testing that to ensure it doesn't have any unexpected adverse effects elsewhere.
如果用户代理样式表的样式导致它应该修复的浏览器出现问题，那么您可以尝试删除有问题的样式并对其进行测试，以确保它不会在其他地方产生任何意外的不利影响。
If it doesn't, use the modified stylesheet. Fixing browser quirks is what these sheets are for - they fix issues, they aren't supposed to introduce new ones.
如果没有，请使用修改后的样式表。修复浏览器怪癖是这些工作表的用途 - 它们修复问题，不应该引入新问题。
If You Are NotAble to Edit the Offending Stylesheet
如果你是不能够编辑违规样式表
If you're unable to edit the stylesheet that contains the offending line, you may consider using the !importantkeyword.
如果您无法编辑包含违规行的样式表，您可以考虑使用!important关键字。
An example:
一个例子：
.override {
border: 1px solid #000 !important;
}
.a_class {
border: 2px solid red;
}
And the HTML:
和 HTML：
<p class="a_class">content will have 2px red border</p>
<p class="override a_class">content will have 1px black border</p>
Try to use !importantonly where you really have to - if you can reorganize your styles such that you don't need it, this would be preferable.
尝试!important仅在您真正需要的地方使用- 如果您可以重新组织您的样式，以便您不需要它，那么这将是可取的。
回答by benhowdle89
No its not. Use Meyers CSS reset :) http://meyerweb.com/eric/tools/css/reset/
不，这不对。使用 Meyers CSS 重置 :) http://meyerweb.com/eric/tools/css/reset/
回答by benhowdle89
I don't understand why nobody points to the specific issue and some answers are totally misleading, especially the accepted answer. The issue is that the OP did not pick a rule that could possibly override the margin property that is set by the User Agent (UA) directly on the ultag. Let's consider all the rules with a margin property used by the OP.
我不明白为什么没有人指出具体问题，有些答案完全具有误导性，尤其是公认的答案。问题是 OP 没有选择可能覆盖用户代理 (UA) 直接在ul标签上设置的边距属性的规则。让我们考虑一下 OP 使用的带有边距属性的所有规则。
body {
margin:0px;
...
}
The body element is way up in the DOM and the UA rule matches an element below, so the UA wins. It's the way inheritance works. Inheritance is the means by which, in the absence of any specific declarations from any source applied by the CSS cascade, a property value of an element is obtained from its parent element. Specificity on the parent element is useless, because the UA rule matches directly the element.
body 元素在 DOM 中向上并且 UA 规则匹配下面的元素，所以 UA 获胜。这就是继承的工作方式。继承是在没有来自 CSS 级联应用的任何来源的任何特定声明的情况下，从其父元素获取元素的属性值的方法。父元素的特殊性是无用的，因为 UA 规则直接匹配元素。
#mainNav{
margin:0 auto;
...
}
This is a better attempt, a more specific selector #mainNav, which matches the mainNav element lower in the DOM, but the same principle applies, because the ulelement is still below this element in the DOM.
这是一个更好的尝试，一个更具体的 selector #mainNav，它匹配 DOM 中较低的 mainNav 元素，但同样的原则适用，因为该ul元素仍然在 DOM 中的这个元素之下。
#mainNav ul li{
...
margin:0;
...
}
This went too far down in the DOM! Now, the selector matches the lielement, which is below the ulelement.
这在 DOM 中走得太远了！现在，选择器匹配li元素下方的ul元素。
So, assuming that the UA rule used the selector uland not !important, which is most likely the case, the solution would have been a simple ul { margin: 0; }, but it would be safer to make it more specific, say #mainNav ul { margin: 0 }.
因此，假设 UA 规则使用选择器ul而不是!important，这很可能是这种情况，解决方案将是一个简单的ul { margin: 0; }，但使其更具体，例如 ，会更安全#mainNav ul { margin: 0 }。
回答by gitdemon
I had the same issues but nothing worked. What I did was I added this to the selector:
我有同样的问题，但没有任何效果。我所做的是将其添加到选择器中：
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
回答by warlord
put this in your "head" of your index.html
把它放在你的 index.html 的“头”中
<style>
html body{
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: 0;
}
</style>
回答by sevenseacat
Everything you write in your own stylesheet is overwriting the user agent styles - that's the point of writing your own stylesheet.
您在自己的样式表中编写的所有内容都会覆盖用户代理样式 - 这就是编写自己的样式表的重点。
