如何阻止js创建的边框影响其他元素？答案

【问题标题】：how to stop js created borders to effect other elements?如何阻止js创建的边框影响其他元素？
【发布时间】：2013-10-08 23:22:10
【问题描述】：

我的网站中有一个水平菜单，其中的项目没有边框。但我希望它在鼠标悬停时有 1px 边框，所以当我在其上移动鼠标时，这个新创建的边框会将其他元素向左移动，大约 2px（因为border-right = border-left = 1px）。

这是我的代码

<div id="library_category_wrapper">
    <ul>
        <li><a href="#">Item1</a></li>
        <li><a href="#">Item1</a></li>
        <li><a href="#">Item1</a></li>
        <li><a href="#">Item1</a></li>
    </ul>
</div>

这是css

#library_category_wrapper ul 
    {
        list-style: none;
        float: right;
        position: relative; 
        top:5px;
        margin: auto;
    }

#library_category_wrapper ul li 
    {
        display: inline;
        margin-left:8px;
        padding : 4px;
    }

#library_category_wrapper li:hover
    {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        border : 1px solid rgba(0, 0, 0, 0.25);
        border-radius : 4px 4px 4px 4px;
        box-shadow : 0 0 5px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.796), 0 0 10px rgba(255, 255, 255, 0.298);
        padding : 4px;
    }

这是DEMO

【问题讨论】：

标签： css hover border

【解决方案1】：

您可以像这样在正常状态上简单地放置一个透明边框：http://jsfiddle.net/Pn8uw/1/

#library_category_wrapper ul li {
    border : 1px solid rgba(0, 0, 0, 0);
}

【讨论】：

@opznhaarlems 的回答实现了完全相同的效果，但具有更好的浏览器支持，因此最好使用它。
@CherryFlavourPez，Mohammad 已经在原始 CSS 中使用了 rgba，所以没有理由不使用它。
嗯，是的，在别无选择的地方。在这里，transparent 以更一致的方式精确地实现了相同的目标。那你为什么不使用它呢？

【解决方案2】：

您可以为默认的 LI 状态添加“透明”边框：

#library_category_wrapper ul li {
  border: 1px solid transparent;
}

演示：http://jsfiddle.net/Pn8uw/2/

【讨论】：

【解决方案3】：

您可以简单地减少悬停时的填充。添加以下属性而不是填充：4px;

#library_category_wrapper li:hover {
    padding: 3px;
}

fiddle

【讨论】：

添加透明边框的其他答案正在修改默认的 LI 状态。在默认的 LI 状态下，您基本上有 5px 填充而不是 4px。如果您确实想为默认状态保持相同的 4px 填充，则需要将默认状态填充减少 1px 并使用透明边框，或者将悬停状态填充减少到 3px 以匹配默认状态。