如何防止firefox縮放時浮動佈局環繞

給定以下HTML。它顯示兩列：#left,#right。兩者都是固定的寬度，並有1px的邊界。寬度和邊框等於上方容器的尺寸：#wrap。如何防止firefox縮放時浮動佈局環繞

當我通過按Ctrl + - 列取得包裝（demo）縮小Firefox 3.5.2。

如何預防？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Test</title> 
    <style type="text/css"> 
     div   {float:left} 
     #wrap   {width:960px} 
     #left, #right {width:478px;border:1px solid} 
    </style> 
    </head> 
    <body> 
    <div id="wrap"> 
     <div id="left"> 
     left 
     </div> 
     <div id="right"> 
     right 
     </div> 
    </div> 
    </body> 
</html>

來源

2009-08-13 Dmitri Zhuchkov

我不知道我完全理解你的情況。縮小縮放實際上應該縮小。你是否說過，當你縮小列環繞？

你應該浮動使用該代碼的這些div在你的CSS：

#container {width: 960px} 
#left {float: left} 
#right {float: right}

如果這不起作用，你可以嘗試通過調整寬度，以彌補一些小的瀏覽器不兼容離開柱之間的小空間。

EDITED（忽略以上）：

看到，因爲你已經給我提供了更多的信息，我要告訴你的是，瀏覽器集成了調整，並具有下列準確完美的像素大小時四捨五入是不最聰明的事情。

相反，你可以有一個DIV具有絕對的寬度和其他有一個自動的寬度，像這樣：

#container {width: 960px;} 
#left {width: 478px;} 
#right {width: auto;}

這將有瀏覽器採取#right儘可能多的空間可以採取的可能在#wrap div中。一定要爲包裝設置一個寬度，否則會佔用100％的窗口。

我希望這有助於！

EDITED：

權是非常接近你固定的寬度，因爲你已經定義了容器的寬度，所以它僅僅是由左側的寬度減去容器寬度。這只是爲了確保在調整窗口大小時不存在差異。

據我所知，它不會佔用整個空間區域，但是，隨着內容的添加，最大限度將會是容器的左側寬度。你想要應用背景嗎？在這種情況下，將右側背景設置爲容器背景，然後將左側設置爲左側背景（確保它覆蓋了一半）。

我希望我能幫上忙。

來源

2009-08-13 19:44:48

我用演示擴展了我的問題。左右浮動不起作用。減少列的寬度有幫助，但它只有一個可用選項？ – 2009-08-13 20:07:24

我已經更新了上面的示例。 – 2009-08-14 02:18:18

#right {width：auto;}有助於包裝，但這不會使#right固定寬度。如果#right沒有足夠的內容，那麼它將小於478px; – 2009-08-17 10:52:26

該問題是由#wrap的寬度引起的。

我已經將寬度設置爲100％，並且在使用CTRL - 縮小時，它不會在Firefox中崩潰。

來源

2009-08-13 21:09:55 ChrisBenyamin

是的，但如果他們想將寬度設置爲960像素（出於某種原因（例如，使用960.gs網格系統），或者如果他們想要將內容居中），則需要爲容器設置寬度。 – 2009-08-14 02:20:20

德米特里，

當瀏覽器caluclates你放大後您的div的新寬度，它並沒有降低邊界元素的兩個478px + 4PX按比例單960像素。所以，你最終這個：

您的原始風格：

#wrap equals 960px wide 
#left & #right, plus border equals 960px wide

一切都非常適合。

放大縮小（CTRL-）

#wrap equals (approx.) 872px wide. 
#left, #right, plus border eqauls 876px wide. 
(left and right reduce to approx 436px each, plus 4 px of border)

內容太寬#wrap。要查看&度量值，只需將背景色應用於#wrap。

要修復，請從#wrap中刪除寬度。因爲它是浮動的，它會閃爍以適應內容。但是，您應該將寬度應用於浮動元素，並且您的div {float：left}將其應用於#wrap。

刪除樣式div {float：left}並將float：left添加到#left，#right。

#left, #right {float:left;width:478px;border:1px solid}

如果你想#wrap爲中心，那麼你就需要再次聲明寬度並添加保證金：0汽車;，在這種情況下，你會再次[編輯有這樣的問題：或你可以像克里斯特指出的那樣將寬度設置爲100％]。因此，只需重新計算#left，#right的寬度以使它們適合。

這是我的理解是，在父母和子女元素的寬度之間留出一點喘息空間是很好的，以避免這種問題。

來源

2009-08-13 21:13:15

嘗試切換到不同的box model如下：

#left, #right 
{ 
    width:480px; 
    border:1px solid; 
    box-sizing: border-box; 

    /* and for older/other browsers: */ 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    -webkit-box-sizing: border-box 
}

來源

2009-08-13 21:20:29

這解決了我的問題。我使用了Compass混合版：http://compass-style.org/reference/compass/css3/box_sizing/ – jedmao 2013-04-09 21:17:30

任何人都可以解釋它爲什麼會發生？我的網站上有同樣的問題，[Goodwill Fire 18]（http://www.goodwillfire18.com/）。「新聞提要」和右邊欄都左右浮動。右邊欄有一個邊界，類似於OP的邊框。在Firefox中縮小時，會將右側邊欄放在底部。 – Kayla 2014-05-16 20:25:18

我遇到上述同樣的問題。在絕望地在互聯網上漫遊幾分鐘後，我發現這顯然是Firefox 3.5.x和IE 7/8中的一個錯誤。在撰寫本文時，該錯誤仍然存在。

要了解更多有關錯誤請到這裏：http://markasunread.com/?p=61（以前http://markasunread.com/2009/06/zoom-bug-in-ie78-and-firefox-caused-by-border/）

來源

2010-03-25 12:20:45 detj

錯誤在Firefox 29.0.1上仍然存在 – Kayla 2014-05-16 20:27:38

我與這個錯誤太摔跤。我在每個選項卡上都有一個固定寬度的選項卡導航，右邊距都是容器div的寬度。

我實際上發現了一個新的解決方案，這似乎很好。標籤導航當然包裹在一個ul標籤中。我在這個ul標籤上設置了比容器div大6px左右的寬度。例如，容器div寬度爲952px，然後ul標籤寬度爲958px。由於導航中的li標籤浮動到左側並具有固定寬度，因此它們不會超出952px，但是ul元素有一定的呼吸空間，這似乎是壓縮此bug的必要條件。我試着在Firefox和IE7/8中縮小，標籤保持原位。

希望這可以幫助別人節省幾分鐘/小時！

來源

2010-11-24 03:36:48 dfw

我有類似的問題。將#right設置爲負邊距工作。例如：

#right{ 
    margin-right:-400px; 
}

來源

2011-03-23 12:32:48 stiopa

玉傢伙，當你有固定的高度一個div，爲防止變焦從分手的一切，加上overflow:hidden它的CSS。這對我來說伎倆，現在每個瀏覽器都可以變得瘋狂。:)

來源

2011-12-15 20:01:01

最好的解決方案在每種情況下修復浮動錯誤是使用tds的表格佈局。這將永遠不會浮動。

來源

2014-05-28 10:13:23

如何防止firefox縮放時浮動佈局環繞

回答

相關問題