功能一個格，但工作不是另一個

我會對使用兩個不同的JS文件兩個不同的網頁兩種不同的div元素。這兩個JS文件具有相同的確切alignDiv()函數，用於在頁面的中心對齊div。我在下面的函數調用當窗口負載：功能一個格，但工作不是另一個

function alignDiv(){ 
    var container= document.getElementById("container"); 
    var inner= document.getElementById("inner"); 
    var inHeight=inner.offsetHeight; 
    var conHeight=container.offsetHeight; 
    var conWidth=container.offsetWidth; 
    var inWidth=inner.offsetWidth; 

    inner.style.position="absolute"; 
    inner.style.top=((conHeight-inHeight)/2); 
    inner.style.left=((conWidth-inWidth)/2); 

}

對於一個DIV，其分配位置，頂部和喜歡它應該離開屬性。對於其他div，它只分配位置屬性，不分配頂部和左側。我不知道爲什麼這樣做！謝謝你的幫助。

來源

2012-03-04 moesef

你的兩個不同的頁面大概有不同的Doctypes。其中一個觸發標準模式，另一個觸發怪異模式。

top和left屬性取長度。除非它們是0，長度必須有單位。你正在給他們分配數字。

在標準模式下，瀏覽器正確無視規則。在怪癖模式下，他們嘗試通過假設px來執行錯誤恢復。

inner.style.top=((conHeight-inHeight)/2) + "px"; 
inner.style.left=((conWidth-inWidth)/2) + "px";

...並修復怪癖模式頁面，使其使用標準模式。 Quirks模式下瀏覽器之間存在很多不一致，這使得它很麻煩。

來源

2012-03-04 09:32:43 Quentin

使用螢火蟲或whatelse檢查

var inHeight=inner.offsetHeight; 
    var conHeight=container.offsetHeight; 
    var conWidth=container.offsetWidth; 
    var inWidth=inner.offsetWidth;

這些值數。如果不是，它不會工作

來源

2012-03-04 09:25:04

按照你的代碼，你的HTML必須是，

<div id="container" style="position:relative"> 
    <div id = "inner"> 
     some content 
    </div> 
</div>

可以確保兩個頁面上，DIV命名container有風格，如「position:relative」，然後再試一次？

，並確保，要指定字符串，而不是在頂部/左屬性INT。像

inner.style.top=((conHeight-inHeight)/2)+"px";

來源

2012-03-04 09:29:19

功能一個格，但工作不是另一個

回答

相關問題