JavaScript代碼在Chrome給予不同的價值觀

當我試圖居中一個下拉菜單，我收到一個JavaScript代碼，將做的工作，但問題是它給了我不同的值在Dreamweaver/IE從鉻/火狐。這是一塊代碼：JavaScript代碼在Chrome給予不同的價值觀

$(document).ready(function() { 
    $("nav ul ul").each(function() { 
     var navWidth = $(this).width(); 
     var liWidth = $(this).closest("li").width(); 
     var gaps = navWidth - liWidth; 
     alert(gaps); 
    }); 
});

在Dreamweaver中，我會得到25，-86和-163，但在鉻，我得到54，-34和-88。

來源

2015-02-23 Alpha Turtle

這個怎麼樣？不同的瀏覽器具有不同的HTML渲染預設值'li' *（和其他許多東西）* – 2015-02-23 19:41:52

那麼我該怎麼做？ – 2015-02-23 19:42:36

通過CSS覆蓋它們，以前沒有做過，但我99％那將是一件輕而易舉的事 – 2015-02-23 19:43:04

您可以使用CSS重置。例如，請參閱Meyer's CSS重置。

但是，請注意，儘管CSS復位，也可在所得到的值的非常小的差異。這裏有一個的jsfiddle鏈接證明：

http://jsfiddle.net/5pa4t8xp/2/

這是我使用的代碼（還有梅耶的參考重置）： -

HTML

<ul> 
    <li>Hi</li> 
    <li>Hello</li> 
    <li>How</li> 
    <li>is</li> 
    <li>your</li> 
    <li>day?</li> 
</ul> 

<div class="answer"></div>

CSS

ul li { 
    display:inline-block; 
    font-family:Arial; 
    font-size:14px; 
    font-weight:normal; 
} 

.answer { 
    border:1px solid Black; 
    margin:20px auto; 
    padding: 5px; 
    line-height:1.5; 
    width:80%; 
}

jQuery的

$(document).ready(function() { 
    $('ul li').each(function() { 
     var liWidth = $(this).width(); 
     var liContent = $(this).html(); 
     //alert(liWidth); 
     //alert(liContent); 
     $('.answer').append('<div>The width of ' + liContent + ' is ' + liWidth + '</div>'); 
    }); 
});

你可以看到下面，我觀察到 enter image description here

編輯的值差異：由於你的問題的第一部分，掩蓋你的具體問題，不給急需HTML代碼，我建議儘量使用 text-align: center財產的CSS居中的下拉菜單。根據html結構，您也可以使用margin: 0 auto技巧來實現此目的。

我建議使用前面提到的CSS方法，而不是你自從開始採用的方法，正如我在上面的例子中說明的那樣，這種方法可能會產生不一致的結果。

來源

2015-02-23 20:07:29

JavaScript代碼在Chrome給予不同的價值觀

回答

相關問題