CSS定位不當 - Safari

我有一個網頁，有兩個div，一個在左邊，一個在右邊。我有這些定位使用浮動：左/右;CSS定位不當 - Safari

所有的FireFox，IE（包括IE6 !!!）和Chrome都很好。但出於某種原因，在Safari中，右側div在左側div下方出現。所以，我在div上放了一個邊框，我注意到只在Safari中，右手div認爲它是其他div的一部分。我已經檢查了divs和關閉div的頁面，並且所有的看起來都不錯。

我也有點困惑，爲什麼它在Chrome中工作，但不是Safari。這兩個瀏覽器都是Webkit瀏覽器嗎？

所有幫助表示讚賞

來源

2011-03-08 patsybrady

沒有它，是很難評論的代碼。 – 2011-03-08 17:09:26

的「最普遍接受」的方法做最左/右div的是浮球兩個div的左，後，立即清除浮動。清除最簡單的方法是將兩個div後添加一個div以下：

<div style="clear:both"></div>

這將確保在浮動元素之後，任何事情都是沒有得到利用浮法性能碰着左右，這將在整個級聯，直到他們被關閉。

現在，一些瀏覽器有邊緣/填充（主要是IE）的問題。臨時分配一個背景（如果已經不存在背景）和寬度比你期望的要小的話 - 如果您需要兩個均爲屏幕50％的div，則爲測試目的分配兩個48％的寬度。現在，這是否解決了這個問題？如果是這樣，Safari可能會對設置在這些div上的浮動/邊距產生負面反應。調整邊距和填充，沖洗，重複。

浮動divs的主要內容可能會變得很匆忙，特別是如果你想要100％的父母或一般的屏幕。你可以很容易地通過這個CSS重置或我個人最喜歡的，一個網格系統，如960.gs這樣的網格系統，否則，你可以做任意的調整，或者a）只有在瀏覽器中才有效，或者b）使用痛苦的瀏覽器特定的樣式表。兩者都不要感謝！

來源

2011-03-08 17:33:39 bpeterson76

我有一個類似的情況無法解決。我的情況是與safari。其他瀏覽器可以。我嘗試將窗口大小調整爲手機大小後，我的問題才存在。如果我打開網頁以手機大小開始，視圖就OK了。如前所述，如果我調整窗口的大小，第二個div將連續排列。 – 2016-10-12 05:09:32

用於填充/邊距註釋的+1。我的問題是利潤率。我向其中一個浮動div應用了「margin-right」，並將下一個div下推。我將它改爲'padding-right'它工作。 – jtate 2017-08-18 18:24:35

試試這個，這將解決您的問題

.container{ clear:both} 
 
.container .label-info { float:right; position:relative; min-width:100px;} 
 
.container label { float:left;}

<div class="container"> 
 
    <div class="label-info">Right side</div> 
 
    <label>My Label</label> 
 
</div>

來源

2014-12-12 16:49:35

爲什麼？給一些解釋。 – rayryeng 2014-12-12 17:12:52

CSS定位不當 - Safari

回答

相關問題