html - 使用 foundation 3 在 chrome 中显示 slider

Question

我正在使用 foundation 3 和原生轨道 slider 构建一个站点。

到目前为止一切顺利...但是 slider 信息没有出现在 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 中的正确位置，但显然会淘汰其他浏览器。

我用foundation有点麻烦，看不出哪里不对...

Answer 1

找到一个简洁的小解决方案...

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

这个小脚本解决了这个问题:

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