定位div元素left＆top不能在FireFox中使用內容

我有一個帶有全屏畫布的網頁。在畫布上，我將放置並放置將包含畫布UI元素的div。我使用jQuery來創建div，併爲他們提供他們需要的CSS樣式。我還在窗口重新調整大小時重新定位和/或重新調整它們的大小。問題是，只要我將一個空格輸入到div中，FireFox就會說'不！似乎忽略JavaScript所做的任何CSS更改，即使我再次刪除div的內容。定位div元素left＆top不能在FireFox中使用內容

這裏的一些技術細節：

我會告訴股利是覆蓋在畫布和功能昏屏幕的情況下有用戶已經打開的對話框等等畫布顯得較暗和額外的關注全屏DIV被拉向對話。

我使用的CSS是：

.ui_layer { 
    position: absolute; 
    top:0px; 
    left:0px; 
} 

#ui_layer_dim { 
    background-color: #000000; 
    opacity: 0.5; 
}

在JavaScript中，我有我自己的函數創建的股利，但它運行這個jQuery：

$("<div id='ui_layer_dim' class='ui_layer' style='z-index:1'/>");

然後，onWindowResize（tiggered通過窗口「調整大小」eventlistener），我改變div的寬度和高度，以適應新的窗口大小：

gameUI.layers["ui_layer_dim"].onWindowResize = function() { 
    this.css("width", window.innerWidth + "px"); 
    this.css("height", window.innerHeight + "px"); 
};

在Chrome中，即使我在div中放置內容，它也可以很好地工作。 FireFox的工作原理，但只有當div處於初始狀態時。對div的內容進行一次更改，然後「BOOM it goes」：不再需要動態調整大小。

我試過了不同的CSS位置設置，嘗試使用CSS函數設置寬度和高度屬性，使用元素的樣式函數並使用setAttribute來查看它是否是由某種不兼容造成的;結果沒有改變。

我已經運行了一系列的測試，看看發生了什麼，一旦內容被放入div，並發現一些奇怪的事情：檢查和css規則不會顯示寬度和高度的變化窗口的innerWidth和innerHeight。 div本身也沒有，但我設置了一些日誌記錄來查看有關窗口的innerWidth和innerHeight的信息，然後設置div的寬度和高度，並在設置div的寬度和高度之前記錄一些信息，並且實際顯示了正確的維度...

建立和測試系統幾天後，我不知道可能會導致問題。就像我之前說過的那樣：Chrome的工作原理應該如此，所以我知道我的代碼在技術上是可行的，但它可能只是需要一種不同的方法才能在FireFox中工作。我希望任何人都知道。幫助將不勝感激！

編輯：這裏有一個代碼的小提琴，嘗試在FireFox中運行，調整結果的大小，它也應該調整灰色div的大小。現在，右鍵單擊結果，轉到檢查器並在div內放置一些文本或甚至一個空格並再次調整大小。不爲我工作。鏈接：http://jsfiddle.net/UsLL6/

編輯2：這是一個截圖，希望能夠解決我遇到的問題。標記的黃色是瀏覽器寬度的初始狀態，我將它設置得很窄以便能夠更清楚地顯示問題。標記爲橙色是我將瀏覽器擴大一點之後的狀態。您可以看到灰色div不會像應該那樣調整大小，檢查器值和CSS規則值也不會調整，但控制檯顯示正確的值。第一個（「設置屬性：.....」）從window.innerWidth中檢索，第二個（「Property height now has ....」）是使用樣式從div元素的實際寬度屬性中檢索的。getPropertyValue。 enter image description here

只注意到IE給出了相同的結果，火狐，但yea..IE ....

來源

2014-04-10 Tim

請小心你的代碼。 – ProllyGeek

隔離代碼中有問題的部分有時很有幫助。它可以讓你看到更好的錯誤，並且可能意識到它實際上正常工作，現在你已經將它與所有其他代碼隔離開來了。 http://Jsfiddle.net可以很有幫助。 – Joonas

應該首先擺弄它！現在就着手吧！ – Tim

當使用JavaScript添加和刪除div中的內容時，它起作用。即使這個問題對我來說已經不存在了，但我仍然很困惑，因爲在FF檢查器中編輯div會產生這樣一個奇怪的結果。

來源

2014-04-28 07:30:41 Tim

是您gameUI.layers由Mozilla知道？你試過jQuery解決方案嗎？

$(window).resize(function(){ 
     $('#ui_layer_dim').width(window.innerWidth); 
     $('#ui_layer_dim').height(window.innerHeight); 
    });

來源

2014-04-10 11:40:38 Bellash

我試過jQuery解決方案：結果相同。我也檢查了gameUI變量，並注意到它是未定義的，但代碼可以肯定地達到它，因爲它創建div和一切。也許FireFox的控制檯使用不同的位置來啓動代碼？我已經嘗試將gameUI附加到窗口，並使其可以通過控制檯訪問，但問題仍然存在。 – Tim

定位div元素left＆top不能在FireFox中使用內容

回答

相關問題