Различные CSS для разных браузеров

Тема в разделе "Веб-дизайн", создана пользователем vilyaban, 13 ноя 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. vilyaban

    vilyaban Постоялец

    Регистр.:
    8 май 2008
    Сообщения:
    111
    Симпатии:
    1
    1. Какие есть способы указывать различные CSS для разных браузеров?

    Для IE - самый простой - условные комментарии
    Код:
    <!--[if IE]><link href='/styleie.css' rel='stylesheet' type='text/css'><![endif]-->
    <![if !IE]><link href='/style.css' rel='stylesheet' type='text/css'><![endif]>
    2. Проблема возникла с отображением списков <li> - в каждом из браузеров (Firefox, IE, Opera) отображается по разному.
     
  2. Eihwaz

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    Допустим, ul у нас имеет класс "list".:
    HTML:
    
    .list {
        width: 200px;
    }
    /* Для Firefox */
    head:first-child+body .list{
        width: 180px;
    }
    
    ---
    Блин, я, кажется, два ваших вопроса воспринял как один.
    Ну, вобщем: можно сделать отдельные css для IE и остальных браузеров. Т.е., две таблицы стилей.
    Обычно делают именно так, и в той, что под все остальные браузеры пользуются хаками (вроде того, что я привел выше), чтобы получить одинаковую работу под всеми бразуерами.
    А по поводу списков можно подробнее?
    ---
    В css почему-то не отобразился комментарий: Первое правило — для всех, второе только для Firefox.
     
  3. vilyaban

    vilyaban Постоялец

    Регистр.:
    8 май 2008
    Сообщения:
    111
    Симпатии:
    1
    Я использую margin. Опера margin похоже не воспринимает.
    Код:
    .list {
    	margin-left:25px;
    }
    .sublist {
    	margin-left:40px;
    }
    и почему-то во всех браузерах отступы получаются разные.

    я так понял этот хак для Firefox?
    А только для оперы хаков нет?
     
  4. Eihwaz

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    Странно, не помню, чтобы сталкивался с такой проблемой. Вы обнулили margin'ы в начале css?
    Да, что-то не отобразился комментарий, да, именно для него.
    В принципе, если совсем никак не обойтись, можно использовать отдельный css:
    HTML:
    
    <link rel="stylesheet" href="style_opera.css" type="opera/css" media="screen" />
    
    (обратите внимание на type)
    Но представьте, как это все поддерживать неудобно будет...
     
  5. vilyaban

    vilyaban Постоялец

    Регистр.:
    8 май 2008
    Сообщения:
    111
    Симпатии:
    1
    Да, обнулил
    Код:
    body,table,td,th {
    	padding: 0px;
    	margin: 0px;
    	border-collapse:collapse;
    }
    Проблема не в том, как отдельный стиль сделать для Оперы. С этим я уже разобрался.
    Проблема в том, как отрегулировать отступы для Оперы

    Добавлено через 18 минут
    И еще:

    в IE и Опере - текст, при переносе на следующую строку, начинается с маркера, а мне нужно, чтобы текст был на одном уровне. - понял из-за чего: я не использую UL
     
  6. whitewolff

    whitewolff Лимонадный Джо :)

    Регистр.:
    29 май 2007
    Сообщения:
    168
    Симпатии:
    33
    ТС, если не ошибаюсь, для оперы и ФФ тоже есть условные коментарии. наизусть не помню, поищите в интернете. а вообще имхо самый стабильный способ - отключить маркеры, обнулить отсупы (или поставить таких размеров, каких надо по дизайну), и элементам списка приписать маркер бекграундом (или не приписывать, если не нужны маркеры, как угодно) :
    HTML:
    <style type="text/css">
    ul{margin: 0; padding: 0; list-style: none;}
    li{background: url('marker.jpg') no-repeat left top;}
    </style>
     
  7. vilyaban

    vilyaban Постоялец

    Регистр.:
    8 май 2008
    Сообщения:
    111
    Симпатии:
    1
    условные комментарии возможны только для IE.

    для остальных делаются пометки в CSS
     
  8. The Finn

    The Finn Постоялец

    Регистр.:
    30 авг 2009
    Сообщения:
    80
    Симпатии:
    9
    Пометки в CSS могут делаться и для IE, для этого перед стилем ставиться *.
    А также, чтобы добиться кроссбраузерности некоторых элементов стилей, в свойствах ставиться значение !important
     
  9. Eihwaz

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    The Finn
    Не совсем так:
    * работает для IE 6 и более ранних версий.
    !important тоже не делает элементы кроссбраузерными какой-то магической силой, используется лазейка: нормальные браузеры не позволяют переназначать свойство, если у него указано !important.
    Т.е.,
    HTML:
    
    #container {
        width: 980px !important;
        width: 960px;
    }
    
    При таком css нормальные браузеры отобразят #container, шириной в 980 пикселей. Говнобраузер (IE6 и ниже) отобразят его шириной в 960 пикселей.
    Для IE7 это уже не работает.
     
  10. The Finn

    The Finn Постоялец

    Регистр.:
    30 авг 2009
    Сообщения:
    80
    Симпатии:
    9
    Eihwaz, собственно по поводу !important я и имел ввиду то, что вы сказали, только сформулировал не так, как надо. Для IE 7 в таком случае нужно использовать условные комментарии.
     
Статус темы:
Закрыта.