javascript代码在chrome中给出不同的值

Question

当我试图将下拉菜单放在中心时，我收到了一个可以完成这项工作的javascript代码，但问题是它在chrome / firefox的dreamweaver / IE中给了我不同的值。 这是代码的一部分：

$(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，但在chrome中，我得到54，-34和-88。

Answer 1

您可以使用CSS重置。例如，请参阅Meyer's CSS重置。

然而，请注意，尽管CSS重置，但所获得的值可能存在非常小的差异。这是一个证明：

的jsFiddle链接

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

这是我使用的代码（还提到了Meyer的重置）： -

<强> 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>');
    });
});

您可以看到我观察

以下的值差异

编辑：由于您的问题的第一部分与您的具体问题无关，而没有提供急需的HTML代码，我建议您使用 text-align: center CSS中的margin: 0 auto属性，用于显示下拉菜单。根据html结构，您也可以使用{{1}}技巧实现此目的。

我建议使用前面提到的CSS方法，而不是你似乎采用的方法，因为我在上面的例子中说明，这种方法会产生不一致的结果。