web-dev-qa-db-ja.com

Google Chromeをターゲットにできますか？

この更新ボタンを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ではこれらを変更する必要があります。

ありがとう。

csssafarigoogle-chrometarget
16
Kyle
@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セレクター 。

37
Kyle

特定のブラウザをターゲットにするために利用できるブラウザハックがいくつかあり、それらのいくつかはブラウザのすべてのバージョンで機能し、いくつかは機能しません。

GoogleChromeのハックのリストは次のとおりです。

WebKitハック：

.selector:not(*:root) {}
  • Google Chrome：すべてのバージョン
  • Safari：すべてのバージョン
  • Opera：14以降
  • Android：すべてのバージョン

ハックをサポート：

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

Google Chrome 28、およびGoogle Chrome> 28、Opera 14 and Opera > 14

  • Google Chrome：28以降
  • Opera：14以降

プロパティ/値のハック：

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

Google Chrome 28、およびGoogle Chrome <28、Opera 14 and Opera > 14、およびSafari 7および7未満。-Google Chrome：28およびBefore-Safari：7以前-Opera：14以降

JavaScriptハック：1

var isChromium = !!window.chrome;
  • Google Chrome：すべてのバージョン
  • Opera：14以降
  • Android：4.0.4

JavaScriptハック：2 {Webkit}

var isWebkit = 'WebkitAppearance' in document.documentElement.style;
  • Google Chrome：すべてのバージョン
  • Safari：3以降
  • Opera：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以降
  • Opera：16以降

詳細については、 このウェブサイト をご覧ください。

7
Hbirjand