5

我有我的网站，它在任何地方看起来都很棒，但是我不是 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 一起工作感到困惑。任何帮助表示赞赏。

4

4 回答 4

8

当您需要使用绝对定位来定位元素时，您几乎应该总是在相对定位的元素中这样做。

<div style="position:relative;"><div style="position:absolute;"></div></div>
于 2012-07-19T03:29:37.687 回答
7

虽然这不是那里描述的问题，但 Android 浏览器在绝对定位方面还有另一个问题；绝对定位的 DIV 消失。Paweł Komarnicki找到的解决方案是-webkit-backface-visibility: hidden：

<div style="position: relative">
    <div style="position: absolute; -webkit-backface-visibility: hidden">
    </div>
</div>
于 2013-08-16T12:28:36.767 回答
0

我的问题是在我的 Android（三星）中，除非其他答案，left: in px 给出正确的位置（绝对）但 left: in % 到位置 0。甚至例如 left: 10px; 左：20%；转到位置 0，calc() 在 left: 中也不起作用，但在宽度上以有限的方式起作用。

所以我认为 % 不适用于 left: 在 Android 中。所以我认为在上面的问题 left:50% 是问题，我想知道它是用相对/绝对位置解决的。我也这样做了，但没有解决方案！使用 -webkit-backface-visibility 时也没有区别！

解决方案：代替 left: 17%，使用 left: calc(17%) 和 left: 的其他固定像素，但 % 不起作用！！！

于 2014-10-22T01:33:22.420 回答
0

我做了一些我认为与这个问题相关的测试。我想将 SVG 元素居中在.Android 4.2.2div中的代码未正确呈现。现在当我更改为问题已修复。我制作了一段代码，您可以并排查看。我的 Android 浏览器只能正确呈现版本；可能是因为强制硬件加速。请注意，我使用了一个很小的 ​​Javascript 代码将它们从一个复制到另一个。这是代码片段和codepen：translatetranslate3dtranslatetranslate3dtranslate3dsvgdiv

代码笔： 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>

于 2018-08-27T10:42:31.713 回答