16

我需要将此更新按钮放置在 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="">&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 更改这些。

谢谢。

4

2 回答 2

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

    /*Chrome CSS here*/

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

修复了问题:)

更新

这个资源效果更好：CSS browser/OS selectors with JS。

于 2010-03-15T14:03:01.470 回答
8

有一些浏览器黑客可用于针对特定浏览器，其中一些适用于所有版本的浏览器，而另一些则不适用。

以下是一些谷歌浏览器的黑客列表：

WebKit 破解：

.selector:not(*:root) {}
  • 谷歌浏览器：所有版本
  • Safari :所有版本
  • 歌剧:14 及以后
  • Android :所有版本

支持黑客：

@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。 - Google Chrome：28 及之前 - Safari：7 及之前 - Opera ：14 及更高版本

JavaScript 黑客：1

var isChromium = !!window.chrome;
  • 谷歌浏览器：所有版本
  • 歌剧:14 及以后
  • 安卓：4.0.4

JavaScript Hacks:2 {Webkit}

var isWebkit = 'WebkitAppearance' in document.documentElement.style;
  • 谷歌浏览器：所有版本
  • Safari : 3 及更高版本
  • 歌剧:14 及以后

JavaScript 黑客：3

var isChrome = !!window.chrome && !!window.chrome.webstore;
  • 谷歌浏览器：14 及更高版本

媒体查询技巧：1

@media \\0 screen {}
  • 谷歌浏览器：22 到 28
  • Safari：7 及更高版本

媒体查询技巧：2

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
  • 谷歌浏览器：29 及更高版本
  • 歌剧：16 岁及以后

欲了解更多信息，请访问本网站

于 2014-08-19T20:01:20.103 回答