2011-11-24 100 views
1

改變方向後,我有一個iPad,對此我用不同的CSS文件不同的方向開發了一個網頁:在CSS元素位置奇怪的偏移iPad上

<link REL="stylesheet" href="portrait_style.css" media="all and (orientation:portrait)"/> 
<link REL="stylesheet" href="landscape_style.css" media="all and (orientation:landscape)"/> 

當我從橫向模式,然後開始移動到肖像,我必須添加125px到所有絕對定位的元素。當我從肖像開始時,它從0開始。

當我從肖像移動到風景並返回時,它又需要偏移量。

有這個可here

演示我懷疑的問題是,有沒有被在縱向模式改變了一些景觀元素。

在我的電腦上的chrome中,這沒有發生。

回答

1

這是通過按壓瀏覽器視區的邊界,無論是與一個寬度超過100%或左設定爲負的值的元素引起的。

我已經找到了解決方法是定身的溢出,使視口的行爲:

body { 
    position: relative; 
    width: 100%; 
    overflow: hidden; 
} 

設置身體position將封裝的所有元素(無論是絕對或相對)進入體內,並將它們夾在身體的邊緣。

3

嘗試用媒體查詢重新設置固定的位置:

/* portrait */ 
@media screen and (orientation:portrait) { 
    .[your-selector]{ 
     position:fixed; 
    } 
} 
/* landscape */ 
@media screen and (orientation:landscape) { 
    .[your-selector]{ 
     position:fixed; 
    } 
} 

它看起來就像當你重新設置該屬性它重新繪製它。

+0

爲我解決了!謝謝。但是我必須使用'position:relative' –

+1

您不必重複position:fixed,只要添加這兩個方向特定的塊,元素就會重新繪製。這只是一個很好的例子:) –