修复Android中的绝对定位

Question

我有我的网站,它看起来很棒,但我不是Android的专业编码器.我不知道它有多余的怪癖,我不确定锄头我真的需要知道.有没有办法像IE中的条件评论一样单独输出？

这是我的网站,横幅和徽标显示在屏幕的左侧.我有一个三星Galaxy 3,这就是我的横幅看起来像.

现在我意识到为什么会发生这种情况,这是因为它们都处于绝对的位置,显然它margin-left正在使它脱离屏幕.但是,如果不破坏所有常规桌面浏览器的布局,我无法改变它.

    #site-title { background: url(img/heavensgate-logo.jpg) no-repeat; width: 229px;height: 297px; position: absolute; top: 0px; left: 50%; margin-left: -438px; z-index: 2; border: 0px; text-indent: -9999px; }

#banner { position: absolute; top: 165px; width:868px; left: 50%; margin-left: -448px; z-index: 1; padding: 15px; background-color:
#fff; border: 1px solid #b4b4b4; }



<h1 id="site-title"><span><a href="http://heavensgatewinery.ca/" title="Heavens Gate Winery" rel="home">Heavens Gate Winery</a></span></h1>

    <div id="banner">
    <img src="http://heavensgatewinery.ca/wp-content/uploads/banner8.jpg" style="position: absolute; visibility: hidden; top: 0px; left: 0px; border: 0px none;">
    </div>

我对如何使用横幅和徽标与Android合作感到困惑.任何帮助表示赞赏.

Answer 1

当您需要使用绝对定位来定位元素时,您应该在相对定位的元素内部进行定位.

<div style="position:relative;"><div style="position:absolute;"></div></div>

Answer 2

虽然这不是那里描述的问题,但Android浏览器还有另一个关于绝对定位的问题; 绝对定位的DIV消失了.PawełKomarnicki发现的解决方案是-webkit-backface-visibility: hidden:

<div style="position: relative">
    <div style="position: absolute; -webkit-backface-visibility: hidden">
    </div>
</div>