Каков наилучший способ переопределить правило таблицы стилей CSS пользовательского агента, которое дает неупорядоченные списки с 1 маркой?

Я работаю над веб-приложением, которое имеет верхнюю панель, похожую на синюю панель facebook наверху. У меня есть неупорядоченный список в div этого бара, чтобы перечислять некоторые элементы, такие как "Входящие", "Уведомления" и т.д. UL имеет 1em-маржу, определенную таблицей стилей пользовательского агента моего браузера. Это проблема, потому что она подталкивает мой topBar вниз 1em. Как я могу переопределить это, чтобы сделать границу ul = 0? Я читал, что переопределение таблиц стилей пользовательских агентов - это плохая идея, поэтому мне интересно узнать, что лучше делать. Спасибо.

EDIT: здесь файл 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>

Ответ 1

Если вы можете отредактировать оскорбительную таблицу стилей

Если стиль стилей пользовательского агента создает проблемы для браузера, который он должен исправить, тогда вы можете попытаться удалить стиль и тестирование, чтобы убедиться, что он не имеет никаких неожиданных неблагоприятных эффектов в других местах.

Если это не так, используйте модифицированную таблицу стилей. Исправление ошибок браузера - это то, для чего предназначены эти листы - они исправляют проблемы, они не должны вводить новые.

Если вы не можете отредактировать оскорбительную таблицу стилей

Если вы не можете редактировать таблицу стилей, содержащую строку нарушения, вы можете использовать ключевое слово !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 только там, где вам действительно нужно - если вы можете реорганизовать свои стили таким образом, что вам это не нужно, это было бы предпочтительнее.

Ответ 2

Нет, нет. Используйте Meyers CSS reset:) http://meyerweb.com/eric/tools/css/reset/

Ответ 3

Я не понимаю, почему никто не указывает на конкретную проблему, и некоторые ответы полностью вводят в заблуждение, особенно принятый ответ. Проблема в том, что OP не выбрал правило, которое могло бы переопределить свойство margin, которое устанавливается User Agent (UA) непосредственно в теге ul. Рассмотрим все правила с использованием свойства margin, используемого OP.

body {

margin:0px;
...
}

Элемент body находится в DOM, а правило UA соответствует элементу ниже, поэтому UA выигрывает. Это способ наследования. Наследование - это способ, с помощью которого при отсутствии каких-либо конкретных объявлений из любого источника, применяемого каскадом CSS, значение свойства элемента получается из его родительского элемента. Специфика родительского элемента бесполезна, так как правило UA напрямую соответствует элементу.

#mainNav{
    margin:0 auto;
    ...
}

Это более эффективная попытка, более конкретный селектор #mainNav, который соответствует элементу mainNav ниже в DOM, но тот же принцип применяется, поскольку элемент ul все еще находится ниже этого элемента в DOM.

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

Это зашло слишком далеко в DOM! Теперь селектор соответствует элементу li, который находится ниже элемента ul.

Итак, считая, что правило UA использовало селектор ul, а не !important, что, скорее всего, будет иметь место, решение было бы простым ul { margin: 0; }, но было бы безопаснее сделать его более конкретным, скажем #mainNav ul { margin: 0 }.

Ответ 4

поместите это в свою "голову" вашего index.html

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

Ответ 5

У меня были те же проблемы, но ничего не получилось. Что я сделал, я добавил это в селектор:

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

Ответ 6

Все, что вы пишете в своей собственной таблице стилей, это переписывание стилей пользовательского агента - это то, что нужно написать собственную таблицу стилей.