跨瀏覽器的CSS max-width屬性的不一致和意外的行爲

我正在構建一個工具，通過書籤在現有網頁上操作DOM，並遇到了在某些網站上設置最大寬度的問題。跨瀏覽器的CSS max-width屬性的不一致和意外的行爲

我的目標是調整任何頁面的大小，使最大寬度爲980px。

然而，給身體的最大寬度980px，表現不正常。在一些頁面上，它可以完美地工作，而其他一些元素則根據新寬度進行重新定位，而另一些則不會。例如，以Google.com爲例。在以下每個截圖中，我都給出了980px的最大寬度。我還手動添加了一條藍線，顯示980px應該在哪裏。

在Chrome中：

Google in Chrome

注意如何在頁面頂部的工具欄不調整大小和搜索領域的區域仍然居中在原有基礎上的寬度，而不是新980px寬。

在Firefox：

Google in Firefox

注意搜索區是如何重新定位，但在工具欄，如Chrome，保留在文檔的整個寬度。

有什麼我可以做的，以便網頁在所有網站和所有瀏覽器中正確調整到980像素？

來源

2011-03-08 Matt Mazur

使用javascript的缺點，我不認爲有一個只使用CSS的跨瀏覽器解決方案。所有瀏覽器都不支持最大寬度。

來源

2011-03-08 22:59:55

我能夠使用JavaScript，因爲我通過JavaScript添加了CSS屬性。你會怎麼做？ – 2011-03-08 23:45:50

所有瀏覽器都支持最大寬度。除非你打電話給IE6瀏覽器。在這種情況下，不。 – Rob 2011-03-09 00:39:51

好吧，我不知道如何以像素爲單位在瀏覽器上始終如一地獲得最小或最大寬度，但是我想分享一下，因爲我查找了幾個小時以瞭解如何正確執行此操作，應用程序，以發現縱橫比在各瀏覽器間是一致的，並且可以間接用於限制div的最小/最大大小，這是我工作的代碼，可能對某人有幫助：

w = $(window).innerWidth(); 
    h = $(window).innerHeight(); 
    ratio = w/h; 
    if (ratio<1){ 
    $('.classdivtofix').css('min-width', $(window).innerWidth()/ratio);

來源

2015-12-10 23:05:17 edencorbin

跨瀏覽器的CSS max-width屬性的不一致和意外的行爲

回答

相關問題