您的位置: 首页  >  技术问答  >  覆盖用户代理CSS样式表规则的最佳方法是什么，该规则为无序列表提供1em的边距?

覆盖用户代理CSS样式表规则的最佳方法是什么，该规则为无序列表提供1em的边距?

分类: 技术问答 • 2022-04-19 10:55:18
问题描述：

我正在开发一个web应用程序，该应用程序的topBar与顶部的facebook蓝色栏相似.我在该栏的div内有一个无序列表，可以列出一些项目，例如收件箱，通知等.UL由我的浏览器的用户代理样式表定义为1em的边距.这是一个问题，因为它使topBar下降了1em.如何覆盖此值以使ul的边界等于0?我读到，覆盖用户代理样式表是一个坏主意，所以我很好奇要学习最好的方法.谢谢.

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.

这是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>

答

如果您能够编辑有问题的样式表

如果用户代理样式表的样式在应该修复的浏览器中引起问题，则可以尝试删除有问题的样式并进行测试，以确保它不会在其他地方产生任何意外的不利影响.

If You Are Able to 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.

如果您无法编辑包含违规行的样式表，则可以考虑使用!important关键字.

If you're unable to edit the stylesheet that contains the offending line, you may consider using the !important keyword.

一个例子:

.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-如果您可以重组样式以使您不需要它，那将是更好的选择.

Try to use !important only where you really have to - if you can reorganize your styles such that you don't need it, this would be preferable.

相关推荐