CSS взломать для таргетинга Firefox 3.5+? - PullRequest
Новая
       7

CSS взломать для таргетинга Firefox 3.5+?

3 голосов
/ 21 июля 2009

Firefox 3.5 теперь поддерживает псевдокласс nth- *, который я использовал для таргетинга на css для Safari и Chrome. Теперь Firefox тоже читает их, вызывая незначительные проблемы с макетом. Кто-нибудь знает способ специально нацелиться на FF 3.5 +? 

BODY:nth-of-type(1) #topsearch input[type=submit] /* Safari 3.1+ and Chrome */ { 
     height:19px 
}

Ответы [ 8 ]

5 голосов
/ 21 июля 2009

Селектор браузера CSS позволяет вам писать CSS для определенных браузеров, не беспокоясь о взломах. Я не могу рекомендовать это достаточно высоко.

5 голосов
/ 21 июля 2009

Как насчет этого, я протестировал его в Safari 4 и высота 19px, в Firefox 3.5 высота отображается как 39px. 

<style>

BODY:nth-of-type(1) #topsearch input[type=submit] /* Safari 3.1+ and Chrome */ { height:19px }      
BODY:nth-of-type(1) #topsearch input[type=submit], x:-moz-any-link, x:default { height: 39px; }

</style>
4 голосов
/ 21 июля 2009

На «религиозной» ноте мы не должны использовать CSS для таргетинга любого браузера. К сожалению, из-за того, что IE отстает от поддержки функций CSS (и всех ошибок), хаки были применены к целевому CSS для данного браузера.

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

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

<head>
  <style>
    body.safari form input{
      /*special styles for Safari*/
    }
    body.firefox form input{
      /*special styles for Firefox*/
    } 
    body.firefox.v3-5 form input{
      /*special styles for Firefox 3.5*/
    } 
</style>
</head>
<body>
  <script>
    //run code here, that sets the class and or id attribute on the body tag...
  </script>

В конце концов, все они хаки ... это зависит только от того, с какими хаки вы готовы жить; -)

0 голосов
/ 20 декабря 2014

За последние несколько лет многое изменилось. Для взлома Firefox 3.5+ вот что я создал для этой цели: 

/* Firefox 3.5 and newer */

_:-moz-handler-blocked, :root .selector { property:value; }

Чтобы проверить это, вы можете увидеть их вживую вместе со многими другими для различных версий браузера на моем живом сайте тестирования хаков CSS здесь: http://browserstrangeness.bitbucket.org/css_hacks.html#firefox

Наслаждайтесь!

0 голосов
/ 05 декабря 2009

Это работает: 

@media screen and (-webkit-min-device-pixel-ratio:0){
    #topsearch input[type=submit] { height:19px; }
}}

Это предназначается для новых браузеров WebKit, а не для Gecko или Trident.

0 голосов
/ 14 августа 2009

с использованием http://rafael.adm.br/css_browser_selector/

просто замените эту часть:

есть ( 'светлячок / 2')? Г + ff2 ': is (' firefox / 3 ')? g +' ff3 '

для этой части:

есть ( 'светлячок / 2')? Г + FF2 ': есть (' светлячок / 3.5 ') G +? ff3_5 ': is (' firefox / 3 ')? g +' ff3 '

что должно сработать

PS: если вы хотите перехватить и другие версии 3.x, вы можете добавить:

есть ( 'светлячок / 2')? Г + FF2 ': есть (' светлячок / 3.5 ') G +? ff3_5 ': есть (' светлячок / 3.6 ') G +? ff3_5 ': есть (' светлячок / 3.8 ') G +? ff3_5 ': is (' firefox / 3 ')? g +' ff3 '

0 голосов
/ 01 августа 2009

Мой подход с использованием класса PHP для определения ОС, браузера и версии браузера. Вы можете настроить таргетинг на любую версию практически любого браузера в любой операционной системе.

0 голосов
/ 30 июля 2009

Кстати, синтаксис "BODY: nth-of-type (1) ..." нарушает способность компрессора YUI минимизировать CSS. Вместо этого я использую "body: first-of-type ...".

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...