具有背景位置的IE（錯誤）百分比

我在IE中遇到了一個問題，只能使用靈活/流體佈局中元素的背景圖像。具有背景位置的IE（錯誤）百分比

基本上，我需要背景圖像（這是1px乘1px）垂直平鋪。當佈局爲全寬時，背景圖像位於676px從左側轉換爲百分比等於70.56367％（676px divide by it's container of 958px）。

這工作正常在火狐，鉻和Safari瀏覽器然而不工作任何IE的的（6,7和8）。當百分比是一個完整的數字，而不是一個分數，即背景位置似乎只工作。背景位置在設置爲70％或71％時會發生變化，依此類推。

這裏是我有什麼，以及它如何出現在瀏覽器：

background:url(link/to/image.gif) repeat-y 70.6680584551148% 0;/*676px/958px*/

我也試着設置爲獨立的X和Y值（相同的結果，雖然）的背景位置：

background-position-x:70.6680584551148%;/*676px/958px*/ 
background-position-y: 0;

火狐（v3.6.3）：

enter image description here

鉻（12.0.742.100）：

enter image description here

的Safari（5.0.2）：

enter image description here

的Internet Explorer（6，7和8 - 所有結果相同）：

enter image description here

所以我的問題是，這只是一個IE瀏覽器問題，瀏覽器無法計算出一個不完整的百分比？或者，有沒有修復或者我錯過了什麼？

來源

2011-06-21 Dan

我最近做擺弄周圍基於使用em的百分比寬度的可擴展網站設計。幸運的是，它只是原型，因爲事實證明，似乎IE忽略了小數點後第二位的任何內容。您可以通過加載IE8並按F12來啓動開發控制檯來看到自己。找到你的CSS的百分比，看看它說什麼。

只是爲了記錄在案，我em測量會一直這樣0.7056367，而不是這個70.56367%這（在我的測試）將成爲0.70。因此，對我來說，IE似乎非常可行，IE最多四捨五入到最接近的百分點（70%）或百分之百（70.56%）。

來源

2011-06-21 04:42:57

不幸的是，這似乎是這種情況。 IE似乎將百分比四捨五入到最接近的整數。儘管它在IE的開發者控制檯中說70.56％，但似乎沒有應用.56％，而只是應用了70％。 – Dan

@丹：是的。至於解決它，也許你可以使用'70％'，而不是'958px'出現在'670.6px'。每個瀏覽器處理半像素而不是十進制百分比的方式可能會更好。 –

我希望它很簡單 - 不幸的是寬度非常精確。儘管如此，我將快速瀏覽http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts，作爲鋪設網站的一種可能的新方法。感謝您的反饋意見。我再等幾個小時看看其他人是否有反饋/解決方案。如果什麼都沒有出現，我會更樂意將你的答案標記爲正確的。乾杯=） – Dan

IE總是讓我們做更多的工作。可能使用不同的CSS樣式是答案

<!--[if gte IE]> 
<link rel="stylesheet" type="text/css" href="iespecific.css" /> 
<![endif]-->

來源

2011-06-21 04:36:08 zia

已有一個@Zia。單獨的樣式表不是答案 - 這與瀏覽器根據百分比渲染寬度有關。而且當百分比不全時缺乏IE能力。 – Dan

嗯，我明白了。對不起，我對你的問題有不同的理解 – zia

背景圖像應放在容器DIV的寬度，使你的代碼應該是這樣的：

background:url(link/to/image.gif) scroll repeat-y 0 0;

來源

2011-06-21 04:42:11 MohamedAlaa

這是一個靈活/流暢的佈局。當瀏覽器窗口縮小時，背景圖像必須移動到與其作爲分隔符的容器相同的寬度。因此，將背景圖像與容器寬度相同將無法解決問題，因爲只要用戶縮小瀏覽器寬度，圖像將不再對齊。 – Dan

具有背景位置的IE（錯誤）百分比

回答

相關問題