我的网站上有一些按钮: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代码作出反应:它减少了<a>
标签的宽度,因此,将按钮文本移到右侧:
起初,我认为这是一个box-sizing
问题,但似乎并非如此。禁用jQuery添加的内联填充会使元素的宽度恢复正常(必须设置左右填充值才能看到怪癖)。
我正在使用Chrome 8.0.552.215和jQuery 1.4.4。
这是Chrome的一个已知问题,还是我身上的“多么可怕的失败”?代码有什么问题吗?你能重现这个错误吗?
答案 0 :(得分: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>
。
编辑:要清楚,上面的代码也会使整个“按钮”可以点击。