我正在开发一个网页应用程序,它的顶部类似于顶部的蓝牙栏.我有一个无序列表在该栏的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>
解决方法
如果您能编辑违规样式表
如果用户代理样式表的风格导致浏览器出现问题,应该修复,那么您可以尝试删除违规风格并进行测试,以确保其他地方没有任何意外的不利影响.
如果没有,请使用修改后的样式表.修复浏览器的怪癖是这些工作表是什么 – 他们修复问题,他们不应该介绍新的.
如果您无法编辑违规样式表
如果您无法编辑包含违规行的样式表,则可以考虑使用！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>
尝试使用！重要的只有你真的必须 – 如果你可以重组你的风格,使你不需要它,这将是更可取的.
