修复Android中的绝对定位

Question

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

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

现在我意识到为什么会发生这种情况，这是因为它们都是绝对定位的，显然margin-left的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>

Answer 3

我的问题是在我的Android（三星）中，除非其他答案，左：在px中给出正确的位置（绝对）但是左：在％中进入位置0.即使例如左：10px; 左：20％; 转到位置0，calc（）在left：中不起作用，但在宽度上以有限的方式工作。

所以我认为％不适合左派：在Android中。 所以我想在上面的问题中留下了：50％是问题，我想知道它是通过位置相对/绝对来解决的。 我做了同样但没有解决方案！ 使用-webkit-backface-visibility时没有区别！

解决方案：代替左：17％，使用左：calc（17％）和左边的另一个固定px：被采取，但％不起作用！

Answer 4

我做了一些我认为与这个问题相关的测试。 我想把一个SVG元素放在div 。这个代码在Android 4.2.2中没有正确呈现。 现在当我将translate更改为translate3d ，问题就解决了。 我做了一段代码，你可以看到translate和translate3d并排。 我的Android浏览器只能正确呈现translate3d版本; 可能是因为强制硬件加速。 请注意，我使用一个小的Javascript代码将svg从一个div复制到另一个div 。 这是代码片段和代码集：

Codepen： https ：//codepen.io/ehsabd/pen/yxOPOe

 document.getElementById('test-translate3d').innerHTML = document.getElementById('test-translate').innerHTML; 

 #test-translate, #test-translate3d{ background: lightgray; margin:20px; float: left; position:relative; padding:100px; } #test-translate svg, #test-translate3d svg{ position:absolute; width:100px; left: 50%; top: 50%; } #test-translate svg{ -webkit-transform: translate(-50%,-50%); } #test-translate3d svg{ -webkit-transform: translate3d(-50%,-50%,0); } 

 <!--I've tested this on Android 4.2.2 native browser and I've seen that the first heart from left (which uses translate is not centered but the second heart (translate3d) is appropriately centered)--> <div id="test-translate"> <svg id="svg19871" sodipodi:docname="remigho_like(paths).svg" viewBox="0 0 604.96 556.17" version="1.1" inkscape:version="0.48.5 r10040" > <g id="layer1" inkscape:label="Calque 1" inkscape:groupmode="layer" transform="translate(-69.568 -427.74)" > <path id="path18741" sodipodi:nodetypes="csscssccc" style="color:#000000;stroke:#000000;stroke-width:53.15;fill:none" inkscape:connector-curvature="0" d="m586.75 734.03c37.196-28.491 61.2-73.36 61.2-123.83 0-86.088-69.799-155.89-155.89-155.89-48.272 0-91.426 21.952-120.02 56.407-28.592-34.455-71.746-56.407-120.02-56.407-86.088 0-155.89 69.799-155.89 155.89 0 50.469 24.003 95.338 61.2 123.83l214.72 223.3z" /> </g> </svg> </div> <div id="test-translate3d"></div>