覆盖用户代理CSS样式表规则的最佳方式是提供无序列表1em边距？
我正在开发一个网页应用，它的顶部有一个类似于facebook的蓝条的topBar。我在该栏的div中有一个无序列表，列出了一些项目，如收件箱、通知等。UL的边距为1em，由我的浏览器的用户代理样式表定义。这是一个问题，因为它使我的topBar降低了1em。我怎样才能重写它使ul的边界= 0呢？我读到过重写用户代理样式表不是一个好主意，所以我很想知道什么是最好的做法。谢谢。
编辑:这是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
}和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>回答 5
Stack Overflow用户
发布于 2011-02-02 19:29:37
不，不是的。使用Meyers reset :) http://meyerweb.com/eric/tools/css/reset/
Stack Overflow用户
发布于 2016-04-09 09:44:32
我不明白为什么没有人指出具体的问题，一些答案完全是误导性的，特别是公认的答案。问题是OP没有选择可能覆盖用户代理(UA)直接在ul标记上设置的边距属性的规则。让我们来考虑一下OP使用的所有带有边距属性的规则。
body {
margin:0px;
...
}body元素在DOM中的位置很高，而UA规则与下面的元素匹配，因此UA获胜。这就是继承的方式。继承是这样一种方法，在CSS级联应用的任何源中没有任何特定声明的情况下，元素的属性值是从其父元素中获取的。父元素的特异性是无用的，因为UA规则直接匹配该元素。
#mainNav{
margin:0 auto;
...
}这是一种更好的尝试，它是一个更具体的选择器#mainNav，它与DOM中较低的mainNav元素相匹配，但是同样的原则也适用，因为ul元素仍然在DOM中的这个元素之下。
#mainNav ul li{
...
margin:0;
...
}这在DOM中走得太远了！现在，选择器与ul元素下面的li元素相匹配。
因此，假设UA规则使用选择器ul而不是!important (最有可能是这种情况)，那么解决方案将是一个简单的ul { margin: 0; }，但#mainNav ul { margin: 0 }说，让它更具体会更安全。
Stack Overflow用户
发布于 2014-09-29 04:19:06
把这个放到你的index.html的“头”里
<style>
html body{
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: 0;
}
</style>https://stackoverflow.com/questions/4873867
复制相似问题
腾讯云开发者
