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

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

19 голосов
/ 02 февраля 2011

Я работаю над веб-приложением, которое имеет верхнюю панель, похожую на синюю полосу 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>

Ответы [ 6 ]

11 голосов
/ 02 февраля 2011

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

10 голосов
/ 02 февраля 2011

Если вы способны отредактировать таблицу стилей обидчивости

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

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

Если вы не способны редактировать таблицу стилей оскорбления

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

6 голосов
/ 09 апреля 2016

Я не понимаю, почему никто не указывает на конкретную проблему, и некоторые ответы вводят в заблуждение, особенно принятый ответ.Проблема заключается в том, что 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 все еще находится ниже этого элемента.в ДОМ.

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

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

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

2 голосов
/ 20 января 2017

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

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
2 голосов
/ 29 сентября 2014

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

 <style>
  html body{
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: 0;
  }
  </style>
1 голос
/ 02 февраля 2011

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

...