Вопрос:

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

css overriding

143251 просмотра

6 ответа

2365 Репутация автора

Я работаю над веб-приложением, которое имеет верхнюю панель, похожую на синюю полосу 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>
Автор: John Источник Размещён: 02.02.2011 11:25

Ответы (6)


1 плюс

21712 Репутация автора

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

Автор: sevenseacat Размещён: 02.02.2011 11:28

10 плюса

23579 Репутация автора

Решение

Если Вы способны к Отредактируйте Оскорблять Stylesheet

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

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

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

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

Автор: Michael Robinson Размещён: 02.02.2011 11:29

11 плюса

22985 Репутация автора

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

Автор: benhowdle89 Размещён: 02.02.2011 11:29

2 плюса

29 Репутация автора

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

 <style>
  html body{
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: 0;
  }
  </style>
Автор: warlord Размещён: 28.09.2014 08:19

7 плюса

0 Репутация автора

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

Автор: user2066805 Размещён: 09.04.2016 01:44

2 плюса

140 Репутация автора

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

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
Автор: GitDemon Размещён: 19.01.2017 10:49
Вопросы из категории :
32x32