我正在开发一个网络应用程序,其topBar类似于顶部的facebook蓝色栏.我在该栏的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>
ben*_*e89 11
不,这不对.使用Meyers CSS重置:) http://meyerweb.com/eric/tools/css/reset/
Mic*_*son 10
如果用户代理样式表的样式导致它应该修复的浏览器出现问题,那么您可以尝试删除有问题的样式并对其进行测试,以确保其他地方没有任何意外的负面影响.
如果没有,请使用修改后的样式表.修复浏览器怪癖是这些表的用途 - 它们修复问题,它们不应该引入新的.
如果您无法编辑包含违规行的样式表,则可以考虑使用该!important关键字.
一个例子:
.override {
border: 1px solid #000 !important;
}
.a_class {
border: 2px solid red;
}
和HTML:
<p class="a_class">content will have 2px red border</p>
<p class="override a_class">content will have 1px black border</p>
尽量!important只在你真正需要的地方使用- 如果你可以重新组织你的风格而不需要它,那就更好了.
小智 7
我不明白为什么没有人指出具体问题,一些答案完全是误导,特别是接受的答案.问题是OP没有选择可能覆盖用户代理(UA)直接在ul标签上设置的margin属性的规则.让我们考虑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中太过分了!现在,选择器匹配li元素下面的ul元素.
因此,假设UA规则使用了选择器ul而不是!important,这很可能就是这种情况,解决方案本来就很简单ul { margin: 0; },但是如果更加具体则更安全#mainNav ul { margin: 0 }.