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

Question

当我试图将下拉菜单居中时，我收到了一个可以完成这项工作的 javascript 代码，但问题是它在 dreamweaver/IE 中为我提供了与 chrome/firefox 不同的值。这是一段代码:

$(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's reset 的引用):-

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 中使您的下拉菜单居中。根据 html 结构，您也可以使用 margin: 0 auto 技巧来实现此目的。

我建议使用上述 CSS 方法，而不是您似乎正在采用的方法，因为正如我在上面的示例中说明的那样，这种方法可能会产生不一致的结果。强>