Können Sie Google Chrome Ziel?
-
20-09-2019 - |
Frage
Ich brauche dieses Update-Taste auf www.euroworker.no/order positionieren (Sie werden einen Artikel in den Warenkorb gelegt haben hinzuzufügen, verwenden Sie die Kjøp Schaltfläche hinzufügen und Handlevogn den Wagen zu sehen). Arbeiten in FF und IE. (Zwar gibt es eine weitere Ausrichtungsprobleme mit IE), aber nicht in Chrome oder Safari. Ich hatte es vor der Arbeit, aber das einzige, was ich tun denken kann, ist Ziel Safari und Chrome. Ist das möglich?
Hier ist die CSS und HTML (Smarty) für Sie.
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=""> </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}
Und die 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;
}
Notwendigkeit, diese für Chrome und Safari zu ändern.
Danke.
Lösung
@media screen and (-webkit-min-device-pixel-ratio:0) {
/*Chrome CSS here*/
#cartUpdate {
position:absolute;
width:160px;
height:30px;
left:660px;
bottom:40px;
}
}
das Problem behoben:)
UPDATE
Diese Ressource besser funktioniert. CSS-Browser / OS-Selektoren mit JS
Andere Tipps
Es gibt einige Browser-Hacks für einen bestimmten Browser-Targeting, einige von ihnen werden die Versionen des Browsers auf alle arbeiten, und einige man sich nicht.
Hier ist die Liste von einigen das Google Chromes des Hacks:
WebKit Hack:
.selector:not(*:root) {}
- Google Chrome : Alle Versionen
- Safari : Alle Versionen
- Oper : 14 und höher
- Android : Alle Versionen
Unterstützt Hacks:
@supports (-webkit-appearance:none) {}
Google Chrome 28 und Google Chrome> 28, Opera 14 und Opera> 14
- Google Chrome : 28 und höher
- Oper : 14 und höher
Eigenschaft / Wert Hacks:
.selector { (;property: value;); }
.selector { [;property: value;]; }
Google Chrome 28 und Google Chrome <28, Opera 14 und Opera> 14 und Safari 7 und weniger als 7. - Google Chrome : 28 und vor dem - Safari : 7 und vor dem - Oper : 14 und höher
JavaScript Hacks: 1
var isChromium = !!window.chrome;
- Google Chrome : Alle Versionen
- Oper : 14 und höher
- Android : 4.0.4
JavaScript Hacks: 2 {Webkit}
var isWebkit = 'WebkitAppearance' in document.documentElement.style;
- Google Chrome : Alle Versionen
- Safari : 3 und höher
- Oper : 14 und höher
JavaScript Hacks: 3
var isChrome = !!window.chrome && !!window.chrome.webstore;
- Google Chrome : 14 und höher
Medien Abfrage Hacks: 1
@media \\0 screen {}
- Google Chrome : 22-28
- Safari : 7 und höher
Medien Abfrage Hacks: 2
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
- Google Chrome : 29 und höher
- Oper : 16 und höher
Weitere Informationen finden Sie unter diese Website