首页 新闻 会员 周边 捐助

a添加hover显现border，移入导致其他a下移

0
悬赏园豆：20 [已解决问题] 解决于 2014-04-01 11:16 
<style>
a { display:inline-block; width:50px; height:50px; margin-left:20px; background:#CCC;}
a:hover { border-bottom:#F00 solid 7px;}
</style>
<body>
<div style=" width:1000px; height:500px; margin:0 auto;">
    <div style=" height:50px;background:#3C9;">
        <a></a>
        <a></a>
        <a></a>
        <a></a>    
    </div>
    <div style=" height:300px; margin-top:50px; background:#0F0;">
    </div>
</div>

移入其中一个a上面都会导致其他三个下移，这是为嘛

Canrz的主页 Canrz | 初学一级 | 园豆：200
提问于：2014-03-31 11:07
< >
分享
最佳答案
0

因为a在hover状态下显示了7px的下border,此时a的高度是 原来高度+7px  总高度发生变化.

a { display:inline-block; width:50px; height:50px; margin-left:20px; background:#CCC;}
//改为如下
a { display:inline-block; width:50px; height:43px; margin-left:20px; background:#CCC;border-bottom:#CCC solid 7px;}
即可
收获园豆：20
coder_wang | 初学一级 |园豆：193 | 2014-03-31 11:15
其他回答(1)
0

height属性指定的是内容框的高度，不包括padding和边框，加了边框之后导致高度增加了14px

con | 园豆：240 (菜鸟二级) | 2014-03-31 11:23

哦没看清 是7px

支持(0) 反对(0) con | 园豆：240 (菜鸟二级) | 2014-03-31 11:51

@con: 为嘛其他三个都下移了呢？

支持(0) 反对(0) Canrz | 园豆：200 (初学一级) | 2014-03-31 16:02
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。