Вы можете настроить таргетинг на Google Chrome? - PullRequest
Новая
       21

Вы можете настроить таргетинг на Google Chrome?

16 голосов
/ 15 марта 2010

Мне нужно разместить эту кнопку обновления на www.euroworker.no/order (вам нужно добавить товар в корзину, используйте кнопку Kjøp, чтобы добавить, и Handlevogn, чтобы просмотреть корзину). Работает в FF и IE. (Хотя есть и другие проблемы с выравниванием в IE), но не в Chrome или Safari. Раньше у меня это работало, но единственное, что я могу придумать, это целевое сафари и Chrome. Возможно ли это?

Вот CSS и HTML (Smarty) для вас.

HTML (Smarty): 

    {capture assign="cartUpdate"}

     <div id="cartUpdate"><!--<input type="submit" class="submit" value="{tn _update}" />-->
     <button type="submit" class="submit" id="oppdatersubmit" name="saveFields" title="Oppdater" value="">&nbsp;</button> </div>
    {/capture}
    {assign var="cartUpdate" value=$cartUpdate|@str_split:10000}
    {php}$GLOBALS['cartUpdate'] = $this->get_template_vars('cartUpdate'); $this->assign_by_ref('GLOBALS', $GLOBALS);{/php}

    {form action="controller=order action=update" method="POST" enctype="multipart/form-data" handle=$form id="cartItems"}

CONTENT

{/form}

И CSS: 

#oppdatersubmit {
 background-image:url(../../upload/oppdater.png);
 background-repeat:no-repeat;
 background-position:left;
 background-color:none;
 border:none;
 overflow:hidden;
 outline:none;
    white-space: nowrap;
 width:77px;
 height:25px;
 cursor:pointer;
 position:absolute;
}

#cartUpdate {
 position:absolute;
 width:160px;
 height:30px;
 left:580px;
 bottom:130px;
}

Необходимо изменить их для Chrome и Safari.

Спасибо.

Ответы [ 2 ]

37 голосов
/ 15 марта 2010 
@media screen and (-webkit-min-device-pixel-ratio:0) {

    /*Chrome CSS here*/

    #cartUpdate {
        position:absolute;
        width:160px;
        height:30px;
        left:660px;
        bottom:40px;
    }
}

Исправлена ​​проблема:)

UPDATE

Этот ресурс работает лучше: Селекторы браузера / ОС CSS с JS .

7 голосов
/ 20 августа 2014

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

Вот список некоторых хаков Google Chromes:

Взлом WebKit: 

.selector:not(*:root) {}
  • Google Chrome : Все версии
  • Safari : Все версии
  • Опера : 14 и позже
  • Android : Все версии

Поддерживает хаки: 

@supports (-webkit-appearance:none) {}

Google Chrome 28 и Google Chrome> 28, Opera 14 и Opera> 14

  • Google Chrome : 28 и более поздние версии
  • Опера : 14 и позже

Свойство / Значение Хаки: 

.selector { (;property: value;); }
.selector { [;property: value;]; }

Google Chrome 28, Google Chrome <28, Opera 14 и Opera> 14, Safari 7 и менее 7. - Google Chrome : 28 и ранее - Safari : 7 и ранее - Опера : 14 и позже

JavaScript Hacks: 1 

var isChromium = !!window.chrome;
  • Google Chrome : Все версии
  • Опера : 14 и позже
  • Android 4.0.4

JavaScript Hacks: 2 {Webkit} 

var isWebkit = 'WebkitAppearance' in document.documentElement.style;
  • Google Chrome : Все версии
  • Safari : 3 и более поздние версии
  • Опера : 14 и позже

JavaScript Хаки: 3 

var isChrome = !!window.chrome && !!window.chrome.webstore;
  • Google Chrome : 14 и более поздние версии

Взлом медиазапросов: 1 

@media \\0 screen {}
  • Google Chrome : 22 до 28
  • Safari : 7 и более поздние версии

Взлом медиазапросов: 2 

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
  • Google Chrome : 29 и более поздние версии
  • Опера : 16 и позже

Для получения дополнительной информации, пожалуйста, посетите этот сайт

...