CSS float Chrome vs Firefox

我最近購買了一個wordpress主題，而且我遇到了一個我似乎無法修復的css問題。不幸的是，主題製作不提供支持了，所以我希望你可以幫我在這裏：dCSS float Chrome vs Firefox

如果您查看此網站：

demo.shakenandstirredweb.com/shaken-grid/

谷歌瀏覽器，你

」會看到標題漂浮在左邊。太好了！

但是，如果您在Firefox中查看網站，您會看到標題不會浮動到左側，但會保持在中間。我一直在搞id和類頭，包裝和網站信息，但我似乎無法讓Firefox頭部像Chrome一樣漂浮在左邊。

鉻

頭根據在體內的內容浮到左。

火狐

頭在中間有點保留。

有什麼建議嗎？

感謝您花時間閱讀本文！

編輯：好吧，我已經知道這是div類wrap。在Firefox中，最大寬度「卡住」在1300px上，而Chrome則自動擴展寬度。奇怪的是，樣式表中.wrap的寬度設置爲1010px，margin auto。有人知道我該怎麼辦？

編輯：好吧，我認爲這與JavaScript有關。我猜這個功能不適用於Firefox：

function centerLayout(){ 
    if(jQuery(window).width() > mobile_width){ 
     jQuery('#header .wrap, #footer .wrap, #filtering-nav, .navigation').css('width', jQuery('.isotope').width() - 10); 
    } 
}

任何提示？

來源

2012-11-29 user1864464

它看起來對我來說是相同的Chrome和Firefox：■這是一個負責任的主題，在相同的分辨率這兩種瀏覽器？也許你正在不同的屏幕上觀看它們，或者使用不同的窗口大小... – scumah

感謝您的期待！我使用相同的分辨率，窗口大小和屏幕來查看網站。我認爲徽標+導航也不會漂浮在IE的左側（至少是舊版本）。 – user1864464

Chrome http://d.pr/i/YbPH 標題根據正文中的內容浮動到左側。 Firefox http://d.pr/i/hrTI 頭部仍然有些中間。 – user1864464

這應該修復它：

添加到您的樣式表：

#grid { 
    margin: auto; 
    width: 1050px; 
}

來源

2012-11-29 20:53:13 JCBiggar

帶'id =「grid」的div沒有應用任何樣式。所以它影響了內部的divs，其中心是內容 – JCBiggar

我不知道這是否是你的問題的答案..當我在Firefox中訪問你的網站時，中間的內容全部浮動到左邊（與完全不同Chrome） – JCBiggar

感謝您的回覆！不幸的是，它並沒有幫助..只是可以肯定的是，我想將徽標+導航移到左側（就像在Chrome中一樣）。不是中間的框。感謝您的時間！ – user1864464

嘗試做它喜歡

例如，在此我把3列，但要確保它工作在所有瀏覽器

-moz-column-count:3; /* Firefox */ 
-webkit-column-count:3; /* Safari and Chrome */ 
column-count:3; /*normal att*/

與-moz-做一次，另一個與-webkit-與無

某些屬性不是所有瀏覽器都明白，所以你需要添加組名稱，瀏覽器使用比如上例中多列並不總是支持的，所以我需要添加套件名稱

我想物業用途是「列數」我寫像往常一樣，並確保它運行完美在所有其他的瀏覽器我的屬性名稱前加上「-kit的名字 - 」

希望我解釋好這個時間=]

來源

2012-11-29 20:54:11 Shaden

感謝您的回覆！你可以請更具體一些，我應該放置代碼？謝謝！ – user1864464

好的，如果我理解正確，我應該使用-moz-和-webkit-作爲float屬性。我會嘗試一下，謝謝。 – user1864464

沒有工作，無論如何感謝 – user1864464

嘗試做類似

CSS

#header { 
    overflow: hidden; 
} 

#header > .wrap { 
    float: left; 
    width: 100%; 
}

function centerLayout(){ 
    if(jQuery(window).width() > mobile_width){ 
    newWidth = jQuery('.isotope').width() - 10; 
    jQuery('#header .wrap, #footer .wrap, #filtering-nav, .navigation').css('width',newWidth); 
    } 
} 
jQuery(document).ready(centerLayout);

來源

2012-11-30 18:26:27

CSS float Chrome vs Firefox

回答

相關問題