Você pode segmentar o Google Chrome?

Question

Preciso posicionar este botão de atualização em www.euroworker.no/order (você precisará adicionar um item ao carrinho, use o botão KJøp para adicionar e lidar com o HandleVogn para visualizar o carrinho). Trabalha em FF e IE. (Embora exista outros problemas de alinhamento com o IE), mas não no cromo ou no safari. Eu tinha funcionado antes, mas a única coisa que consigo pensar é o safari e o Chrome alvo. Isso é possível?

Aqui está o CSS e o HTML (Smarty) para você.

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}

E o 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;
}

Precisa alterá -los para Chrome e Safari.

Obrigado.

Answer 1

@media screen and (-webkit-min-device-pixel-ratio:0) {

    /*Chrome CSS here*/

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

Corrigido o problema :)

ATUALIZAR

Este recurso funciona melhor: Seletores de navegador/sistema operacional CSS com JS.

Answer 2

Existem alguns hacks do navegador disponíveis para segmentar um navegador específico, alguns deles funcionarão em todas as versões do navegador, e alguém não.

Aqui está a lista de alguns dos hacks do Google Chromes:

Webkit Hack:

.selector:not(*:root) {}

• Google Chrome:Todas as versões
• Safári:Todas as versões
• Ópera : 14 e mais tarde
• Android:Todas as versões

Suporta hacks:

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

Google Chrome 28 e Google Chrome> 28, Opera 14 e Opera> 14

• Google Chrome:28 e mais tarde
• Ópera : 14 e mais tarde

Hacks de propriedade/valor:

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

Google Chrome 28 e Google Chrome <28, Opera 14 e Opera> 14 e Safari 7 e menos de 7. - Google Chrome:28 e antes - Safári:7 e antes - Ópera : 14 e mais tarde

Javascript Hacks: 1

var isChromium = !!window.chrome;

• Google Chrome:Todas as versões
• Ópera : 14 e mais tarde
• Android:4.0.4

Javascript Hacks: 2 {webkit}

var isWebkit = 'WebkitAppearance' in document.documentElement.style;

• Google Chrome:Todas as versões
• Safári:3 e mais tarde
• Ópera : 14 e mais tarde

Javascript Hacks: 3

var isChrome = !!window.chrome && !!window.chrome.webstore;

• Google Chrome:14 e mais tarde

Hacks de consulta de mídia: 1

@media \\0 screen {}

• Google Chrome:22 a 28
• Safári:7 e mais tarde

Hacks de consulta de mídia: 2

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }

• Google Chrome:29 e mais tarde
• Ópera:16 e mais tarde

Para mais informações por favor visite esse site