0

我正在使用基础 3 和原生轨道滑块构建一个站点。

到目前为止一切顺利......但滑块信息没有出现在 chrome 中的正确位置。

好的，很容易修复我听到你说...应用 chrome 特定的样式。很好，我喜欢这个想法，只是它会与 safiri 混淆，从而使页面正常。

的HTML：

<div id="featured">
    <div>
        <img src="images/slider/ironman-txt.jpg" alt="">
        <div class="featuredInfo">
        <h3>IRON MAN</h3>
        <hr />
        <p>When Tony Stark’s world is torn apart by a formidable terrorist called the Mandarin, Stark starts an odyssey of rebuilding and retribution.</p>
            <ul class="featuredActions">
            <li><a href="#">Watch Trailer</a></li>
            <li>-<a href="#">15 PG Rating</a></li>
            <li><a href="#">Book Seats</a></li>
        </ul>
        </div>
    </div>
</div>

css（scss）：

#featured {
    background-color: $white;
    max-height: 400px;
    .featuredInfo {
    float: right;
    padding: 0 1em;
    max-width: 25.5em;
    height: 100%;
    z-index: 10; 
    h3 {
        padding: 0.5em 0 0.1em 0;
        margin: 0;
        text-transform: uppercase;
    }
    hr {
        margin: 7px 0;
        border-color: $txtColor;
        height: 2px;
        border-width: 1px;
    }
}

实时链接：

http://madmantis.co.uk/sites/schwack/

我知道如果我添加 position: relative; 和顶部：-400px；特色信息 div 将移动到 chrome 中的正确位置，但显然会淘汰其他浏览器。

我在使用粉底时有点困扰，我看不出有什么问题......

4

1 回答 1

0

找到了一个巧妙的小解决方案......

为了将 chrome 与 safari（和其他 android 浏览器）区分开来，不能使用 webkit css 选择器。

这个小脚本把它整理出来：

http://rafael.adm.br/css_browser_selector/

于 2013-11-15T14:08:13.743 回答