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

发布于 2024-10-15 15:36:52 字数 1216 浏览 3 评论 0原文

我正在开发一个网络应用程序，它的顶部栏类似于 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>

原文

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.

Here's the CSS file:

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:

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

弃爱 2024-10-22 15:36:52

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

如果用户代理样式表的样式给浏览器带来了应该修复的问题，那么您可以尝试删除有问题的样式并进行测试以确保它不会出现问题。不会对其他地方产生任何意想不到的不利影响。

如果没有，请使用修改后的样式表。这些工作表的目的是修复浏览器怪癖 - 它们解决问题，而不是引入新问题。

如果您无法编辑有问题的样式表

如果您无法编辑包含有问题的行的样式表，您可以考虑使用!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>

Live example

尝试仅使用 !important当你确实需要的时候 - 如果你可以重新组织你的样式，这样你就不再需要它，这会更好。

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.

If You Are Not Able to Edit the Offending Stylesheet

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

An example:

.override {
    border: 1px solid #000 !important;
}

.a_class {
    border: 2px solid red;
}

And the HTML:

<p class="a_class">content will have 2px red border</p>
<p class="override a_class">content will have 1px black border</p>

Live example

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.

回复收藏 0 原文

如若梦似彩虹 2024-10-22 15:36:52

不，不是。使用 Meyers CSS 重置:) http://meyerweb.com/eric/tools/css/reset/

回复收藏 0 原文

以可爱出名 2024-10-22 15:36:52

我不明白为什么没有人指出具体问题，有些答案完全具有误导性，尤其是公认的答案。问题在于 OP 没有选择可能覆盖由用户代理 (UA) 直接在 ul 标记上设置的边距属性的规则。让我们考虑一下 OP 使用的带有 margin 属性的所有规则。

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 }。

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 ul tag. Let's consider all the rules with a margin property used by the 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.

#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 ul element is still below this element in the DOM.

#mainNav ul li{
    ...
    margin:0;
    ...
}

This went too far down in the DOM! Now, the selector matches the li element, which is below the ul element.

So, assuming that the UA rule used the selector ul and 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 }.

回复收藏 0 原文

泪是无色的血 2024-10-22 15:36:52

把它放在你的index.html的“head”中

 <style>
  html body{
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: 0;
  }
  </style>

put this in your "head" of your index.html

 <style>
  html body{
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: 0;
  }
  </style>

回复收藏 0 原文

递刀给你 2024-10-22 15:36:52

您在自己的样式表中编写的所有内容都会覆盖用户代理样式 - 这就是编写自己的样式表的要点。

回复收藏 0 原文

温柔嚣张 2024-10-22 15:36:52

我也遇到了同样的问题，但没有任何效果。我所做的是将其添加到选择器中：

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

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;

回复收藏 0 原文

好多鱼好多余 2024-10-22 15:36:52

无序列表的默认行为（默认符号是循环的圆盘、圆形和方形）应该使用计数器样式规则。

具体来说，无序列表的 list-style-type 属性值应该像这样实现：

@counter-style disc {
  system: cyclic;
  symbols: \2022;
  /* • */
  suffix: " ";
}

@counter-style circle {
  system: cyclic;
  symbols: \25E6;
  /* ◦ */
  suffix: " ";
}

@counter-style square {
  system: cyclic;
  symbols: \25AA;
  /* ▪ */
  suffix: " ";
}

不幸的是，您不能以任何方式覆盖它，您只能引入自己的计数器样式。并且它在不同浏览器中的实现并不标准化。他们不遵循 W3C/WHATWG 建议，甚至没有编写测试来验证它。

我想，这样做是为了保持向后兼容性，因为圆盘和正方形是在 w3c 指定如何实现它们之前实现的。

所以，TL;DR 你不能设计保留的圆盘、圆形或方形列表样式类型，它们是一成不变的、过时且无用的。

The default behavior of unordered lists (the default symbols being disc, circle and square in cycle) is supposed to be implemented using the counter style rule.

Specifically, the list-style-type property values for unordered lists supposed to be implemented like this:

@counter-style disc {
  system: cyclic;
  symbols: \2022;
  /* • */
  suffix: " ";
}

@counter-style circle {
  system: cyclic;
  symbols: \25E6;
  /* ◦ */
  suffix: " ";
}

@counter-style square {
  system: cyclic;
  symbols: \25AA;
  /* ▪ */
  suffix: " ";
}

Unfortunately, you can't override it in any way, you can only introduce your own counter style. And the implementation of it in different browsers is not standardised. They don't follow this W3C/WHATWG recommendation and the tests are not even written to verify it.

I suppose, this was done to preserve backward compatibility, as disc circle and square were implemented before w3c specified how they should be implemented.

So, TL;DR you can't style the reserved disc, circle or square list style type, they're fixed in stone, obsolete and useless.

回复收藏 0 原文

~没有更多了~