jquery - 由 jQuery 设置的填充会更改元素的宽度

Question

我有一个主页上有几个按钮的网站:http://www.bniolsztyn.pl (波兰语，抱歉)。

有几个带有以下标记的蓝色按钮:

<div class='more-link'>
    <a href='#'>Read more...</a>
</div>

他们的样式是:

div.more-link a {
    padding: 8px 20px;
    color: #d0d0d0;
}
div.more-link {
    width: 100%;
    height: 12px;
    padding: 6px 0;
    margin: 4px 0;
    text-align: center;
    background: url(/sites/all/themes/bni/img/button.png) center repeat-x;
    background-color: #1a3754;
    background: -moz-linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#5190cf),color-stop(48%,#27527e),color-stop(52%,#1a3754),color-stop(100%,#234a71));
    background: linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%);
    border: 1px solid #5190cf;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5);
    box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5);
}

内部<a>标签两边都有固定的 20px 内边距:

使用 jQuery，我让它占据整个父 div:

jQuery代码如下:

$(document).ready(function(){
    $('div.more-link a').each(function(){
        var container = $(this).parent().width();
        var link = $(this).width();
        var pad = Math.floor((container - link) / 2);
        $(this).css({
            paddingLeft: pad + 'px',
            paddingRight: pad + 'px'
        });
    });
});

现在，在 Firefox、Opera 和 Internet Explorer 中一切正常。然而，Chrome 似乎以一种特殊的方式对 jQuery 代码使用react:它减少了 <a> 的宽度。标签，并因此将按钮文本移到右侧:

一开始我以为是box-sizing问题，但似乎并非如此。禁用由 jQuery 添加的内联填充会使元素的宽度恢复正常(必须设置左右填充值才能看到怪癖)。

我使用的是 Chrome 8.0.552.215 和 jQuery 1.4.4。

这是 Chrome 的已知问题还是我这边的“多么可怕的失败”？代码有什么问题吗？你能重现错误吗？

Answer 1

我不相信您需要 JQuery 来实现这一点。您只是想将 <a> 居中吗？容器“按钮”内的文本 <div> ？如果是这样，您可以使用 CSS 做到这一点:

div.more-link a {
  color: #d0d0d0;
  display:block;
  line-height: 24px;
}
div.more-link {
  width: 100%;
  height: 24px;
  margin: 4px 0;
  text-align: center;
  background: url(/sites/all/themes/bni/img/button.png) center repeat-x;
  background-color: #1a3754;
  background: -moz-linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#5190cf),color-stop(48%,#27527e),color-stop(52%,#1a3754),color-stop(100%,#234a71));
  background: linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%);
  border: 1px solid #5190cf;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5);
  -moz-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5);
  box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5);
}

请注意，我只是删除了两个元素的填充，调整了 div 的高度，并添加了 display:block; , 和 line-height:24px;到 <a> .

编辑:明确地说，上面的代码还将使整个“按钮”可点击。