Pouvez-vous cibler Google Chrome?

Question

Je dois placer ce bouton de mise à jour sur www.euroworker.no/order (vous devrez ajouter un article au panier, utilisez le bouton Kjøp pour ajouter et Handlevogn pour voir le panier). Fonctionne dans FF et IE. (Bien qu'il y ait encore des problèmes d'alignement avec IE), mais pas dans Chrome ou Safari. Je l'avais travaillé avant, mais la seule chose que je peux penser à faire est safari cible et Chrome. Est-ce possible?

Voici le CSS et HTML (Smarty) pour vous.

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}

Et le 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;
}

Il faut changer ces derniers pour Chrome et Safari.

Merci.

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

Correction du problème:)

UPDATE

Cette ressource fonctionne mieux. navigateur CSS / sélecteurs OS avec JS

Answer 2

Il y a quelques hacks navigateur disponibles pour le ciblage d'un navigateur spécifique, certains d'entre eux travailleront sur toutes les versions du navigateur, et certains ne les pas.

Voici la liste de certains des hacks de Google Chromes:

WebKit bidouille:

.selector:not(*:root) {}

• Google Chrome : Toutes les versions
• Safari : Toutes les versions
• Opera : 14 et versions ultérieures
• Android : Toutes les versions

Prise en charge Hacks:

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

Google Chrome 28 et Google Chrome> 28, Opera 14 et Opéra> 14

• Google Chrome : 28 et versions ultérieures
• Opera : 14 et versions ultérieures

Propriété / Valeur Hacks:

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

Google Chrome 28 et Google Chrome <28, Opera 14 et Opera> 14 et Safari 7 et moins de 7.  - Google Chrome : 28 et avant  - Safari : 7 et avant  - Opera : 14 et versions ultérieures

JavaScript Hacks: 1

var isChromium = !!window.chrome;

• Google Chrome : Toutes les versions
• Opera : 14 et versions ultérieures
• Android : 4.0.4

JavaScript Hacks: 2 {Webkit}

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

• Google Chrome : Toutes les versions
• Safari : 3 et versions ultérieures
• Opera : 14 et versions ultérieures

JavaScript Hacks: 3

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

• Google Chrome : 14 et versions ultérieures

Médias Recherche Hacks: 1

@media \\0 screen {}

• Google Chrome : 22 à 28
• Safari : 7 et versions ultérieures

Médias Recherche Hacks: 2

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

• Google Chrome : 29 et versions ultérieures
• Opera : 16 et versions ultérieures

Pour plus d'informations, visitez ce site