5

私は自分のウェブサイトを持っていて、どこでも見栄えがしますが、私はAndroidのプロのコーダーではありません。私はそれが持っている余分な癖を知りません、そして私が本当に知る必要がある多くの鍬がわかりません。IEの条件付きコメントのようにそれを選び出す方法はありますか？

これが私のウェブサイトで、バナーとロゴが画面の左側に表示されます。私はSamsungGalaxy3を持っていますが、これが私のバナーの外観です。

ここに画像の説明を入力してください

今、私はこれが起こっている理由を理解しています。それは、それらが両方とも絶対的に配置されており、明らかに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（Samsung）にあり、他の答えがない限り、left：in pxは正しい位置（絶対）を示しますが、left：in％は位置0になります。たとえばleft：10px; 左：20％; 位置0に移動すると、calc（）はleft：でも機能しませんが、幅が制限されて機能します。

したがって、％は左では機能しないと思います：Androidの場合。だから私は上記の問題で残っていると思いました：50％が問題でした、私はそれが相対的/絶対的な位置で解決されたのだろうかと思います。私は同じことをしましたが、解決策はありませんでした！-webkit-backface-visibilityを使用しても違いはありません！

解決策：left：17％の代わりに、left：calc（17％）を使用し、left：の他の固定pxを使用しますが、％は機能しません!!!

于 2014-10-22T01:33:22.420 に答える
0

私はこの質問に関連すると思われるいくつかのテストを行いました。SVG要素を内部の中央に配置したかったのです。Android4.2.2divではコードが正しくレンダリングされませんでした。今、私が問題に変更すると修正されます。両方を並べて表示できるコードを作成しました。私のAndroidブラウザはバージョンを正しくレンダリングするだけです。おそらくハードウェアアクセラレーションが原因です。小さなJavascriptコードを使用してから別のコードにコピーしたことに注意してください。コードスニペットとcodepenは次のとおりです。translatetranslate3dtranslatetranslate3dtranslate3dsvgdiv

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>

于 2018-08-27T10:42:31.713 に答える