2012-07-18 42 views
5

我有我的网站,无论到哪里都很棒,但我不是Android的专业编码器。我不知道它有什么额外的怪癖,我不确定我真的需要知道多少。有没有办法像IE中的条件注释一样将它单独出来?修复Android中的绝对定位问题

Here is my website并且横幅和徽标显示在屏幕的左侧。我有一个三星Galaxy 3,这是我的旗帜上看起来像它。

enter image description here

现在我知道为什么发生这种情况,那是因为他们都绝对定位明明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一起工作。任何帮助表示赞赏。

+0

你有没有考虑过创建一个单独的移动网站,并用android浏览器将任何人重定向到移动网站? – psubsee2003 2012-07-18 16:38:28

+0

可以肯定的是,如果你将你的内容封装在div标签中并应用样式'position:relative;'对那些div标签,它会导致你的绝对定位正常工作。我现在无法在设备上进行测试,因此我不想将其作为答案发布。 – 2012-07-18 16:39:52

+0

@ psubsee2003 - 我并不是真的想要制作一个全新的网站或额外的编码来制作移动版本的一个小对齐问题。这是一个很好的做法,但我不是移动设备网站专家 – kia4567 2012-07-18 17:46:01

回答

7

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

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

这个答案应该被视为不相关的问题 – msmfsd 2016-12-05 03:14:37

7

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

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

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

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

解决方案:取代左侧:17%,使用左侧:calc(17%),左侧的其他固定像素被采用,但%不起作用!