Google Chromeをターゲットにすることはできますか?
-
20-09-2019 - |
質問
この更新ボタンを www.euroworker.no/order に配置する必要があります (カートに商品を追加し、Kjøp ボタンを使用して追加し、Handlevogn を使用してカートを表示する必要があります)。FFとIEで動作します。(IE には別の位置合わせの問題がありますが)、Chrome や Safari では問題はありません。以前は機能していましたが、私が考えることができる唯一のことは、SafariとChromeをターゲットにすることです。これは可能でしょうか?
CSS と HTML(Smarty) は次のとおりです。
HTML(スマート):
{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}
そして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 ではこれらを変更する必要があります。
ありがとう。
解決
@media screen and (-webkit-min-device-pixel-ratio:0) {
/*Chrome CSS here*/
#cartUpdate {
position:absolute;
width:160px;
height:30px;
left:660px;
bottom:40px;
}
}
問題を修正しました:)
アップデート
このリソースはより適切に機能します。 JSを使用したCSSブラウザ/OSセレクタ.
他のヒント
特定のブラウザをターゲットにするために利用できるブラウザ ハックがいくつかありますが、その中にはブラウザのすべてのバージョンで機能するものもあれば、機能しないものもあります。
Google Chrome のハッキングのリストは次のとおりです。
WebKit ハック:
.selector:not(*:root) {}
- グーグルクローム:すべてのバージョン
- サファリ:すべてのバージョン
- オペラ :14以降
- アンドロイド:すべてのバージョン
ハックのサポート:
@supports (-webkit-appearance:none) {}
Google Chrome 28、および Google Chrome > 28、Opera 14、および Opera > 14
- グーグルクローム:28歳以降
- オペラ :14以降
プロパティ/値のハック:
.selector { (;property: value;); }
.selector { [;property: value;]; }
Google Chrome 28、Google Chrome < 28、Opera 14 および Opera > 14、Safari 7 および 7 未満。- グーグルクローム:28歳以前 - サファリ:7以前 - オペラ :14以降
JavaScript ハック:1
var isChromium = !!window.chrome;
- グーグルクローム:すべてのバージョン
- オペラ :14以降
- アンドロイド:4.0.4
JavaScript ハック:2 {Webkit}
var isWebkit = 'WebkitAppearance' in document.documentElement.style;
- グーグルクローム:すべてのバージョン
- サファリ:3以降
- オペラ :14以降
JavaScript ハック:3
var isChrome = !!window.chrome && !!window.chrome.webstore;
- グーグルクローム:14以降
メディアクエリのハック:1
@media \\0 screen {}
- グーグルクローム:22~28
- サファリ:7以降
メディアクエリのハック:2
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
- グーグルクローム:29歳以降
- オペラ:16 以降
詳細については、こちらをご覧ください このウェブサイト
所属していません StackOverflow