我想讓這個網站：http://501commons.org在iPhone上與其他瀏覽器上的相同。在Android上，它工作得很好。我已經將-webkit-text-size-adjust: 100%;添加到了身體風格，這對此有所幫助。什麼是仍然沒有工作有以下幾件，我想不通爲什麼移動Safari瀏覽器不能正常顯示它們：iPhone Safari上的定位和字體大小問題

左上角的標誌只是普通不會出現
在搜索框中右上方距離太遠
標題爲「非營利資源等的資源」中的紅色口號太大，太低，並超出右邊框
三個導航菜單項的字體（探索下議院，志願者，投資）太大

其他一切似乎都沒問題，至少在主頁上。奇怪的是，上述所有四個問題都出現在標題中。

任何幫助將非常感激！謝謝！

來源

2011-09-28 fulv

我想通了：

左上標誌

標誌沒有顯示出來，到一個陌生的非級聯的問題所致。徽標是<a id="portal-logo" ...>內的<img>選項卡。 #portal-logo在應用於它的倒數第二個樣式表中有display: inline-block;規則，但不在最後一個樣式表中。換句話說，這是我們所擁有的：

#portal-logo {  /* in the last CSS file */ 
    margin-bottom: 0; 
} 

#portal-logo {  /* in the next-to-last CSS file */ 
    display: inline-block; 
    margin: 1.375em 0; 
}

添加display: inline-block;最後一個樣式表使神奇的標誌出現。然後，我還不得不撥弄margin s，position,top等，以使它出現在正確的位置，但所有這些都在只在移動瀏覽器上有條件加載的CSS文件中，所以沒關係。這真的很奇怪，iOS上的Safari不會級聯display: inline-block;風格！

搜索框中

我做了搜索框，在適當的地方被渲染加入text-align:right;它的容器，即使與text-align:left;同一容器較早的規則使得它在其他瀏覽器的工作只是罰款。

口號

的口號所需要的大部分調整。它包含在<div id="slogan">中。這裏是舊規則：

#slogan { 
    color: #EE3524; 
    float: right; 
    font-size: 110%; 
    font-weight: bold; 
    margin-right: -190px; 
    padding-top: 60px; 
    position: relative; 
    z-index: 1; 
}

這裏是新規則能在移動Safari瀏覽器的工作原理：

#slogan { 
    -webkit-text-size-adjust: 100%; 
    clear:right; 
    color:#ee3524; 
    font-size:17.6px; 
    font-weight: bold; 
    float:right; 
    margin-right:0px; 
    padding-bottom:50px; 
    padding-top:0px; 
    position:relative; 
    text-align:right; 
    z-index:1; 
}

其中一個關鍵區別是在PX絕對font-size，而不是作爲一個百分比值。

菜單項字體

同樣，指定在像素代替％的font-size似乎是這裏的關鍵：

老：

#portal-globalnav li a { 
    background-color: transparent; 
    color: #FFFFFF; 
    font-size: 1.2em; 
    font-weight: bold; 
    min-width: 3em; 
    padding-bottom: 11px; 
}

新：

#portal-globalnav li a { 
    background-color:transparent; 
    color:#fff; 
    font-size:15.4px; 
    font-weight:bold; 
    padding-bottom:11px; 
    min-width:3em; 
}

YMMV！

來源

2011-10-22 03:20:34 fulv

iPhone Safari上的定位和字體大小問題

回答

YMMV！

相關問題