2

我想创建一个导航栏。<div>s 应该包含在s<a>中。所以我创建了以下代码（简化，仅限 webkit）：

<!Doctype HTML>
<html>

<head>
    <title>Example</title>

    <style>
        .menuStripItem {
            float: left;
            width: 25%;
            height: 50px;
            /* Vertical center */
            line-height: 50px;
            /* Horizontal center */
            text-align: center;
            border-radius: 2px;
            /* smooth background modification */
            -webkit-transition: background-color linear 0.2s;
        }

            .menuStripItem:hover {
                background-color: lightgrey;
                border: 1px solid cadetblue;
            }
    </style>
</head>

<body>

    <div>
        <div>
            <nav>
                <ul style="list-style-type: none; padding-left: 0">
                    <li class="menuStripItem">
                        <a href="javascript:void(0)">
                            <div>Menu1</div>
                        </a>
                    </li>
                    <li class="menuStripItem">
                        <a href="javascript:void(0)">
                            <div>Menu2</div>
                        </a>
                    </li>
                    <li class="menuStripItem">
                        <a href="javascript:void(0)">
                            <div>Menu3</div>
                        </a>
                    </li>
                    <li class="menuStripItem">
                        <a href="javascript:void(0)">
                            <div>Menu4</div>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

</body>

</html>

当您尝试它时，您会注意到<div>s 内的内容会反弹，并且<div>在悬停时会被推入新行。那可能是因为边框需要1px。

我想出了一个使用 CSS 的解决方案：

    .menuStripItem {
        float: left;
        width: 25%;
        height: 50px;
        /* Vertical center */
        line-height: 50px;
        /* Horizontal center */
        text-align: center;
        border-radius: 2px;
        /* Ensures that adding a border doesn't increase the width of div */
        -webkit-box-sizing: border-box;
        /* smooth background modification */
        -webkit-transition: background-color linear 0.2s;
        /* Make sure content does not bounce PART1 no idea why this works*/
        -webkit-transition: font linear 1s;
    }

        .menuStripItem:hover {
            background-color: lightgrey;
            border: 1px solid cadetblue;
            /* Make sure content does not bounce PART2 */
            margin-top: -1px;
        }

问题是我不知道为什么会这样。我发现你通常创建一个Transition具有多个属性的，但是当我使用

-webkit-transition: background-color linear 0.2s, font linear 1s;

它不再起作用了。这很令人困惑。

你知道发生了什么事吗？或者，也许您有更好的解决方案来修复弹跳链接？

4

1 回答 1

2

只需在 .menuStripItem 上添加此 css 规则即可修复它

border: 1px solid #FFFFFF;

我为此创造了一个小提琴。

点击小提琴

解决方法是，当悬停之前已经存在 1px 边框时，悬停时它只会替换颜色。但是，如果您在悬停时添加更高像素的边框..由于悬停时边框宽度的变化，您可以再次看到弹跳效果。HTML 框模型更好地解释了这一点。

于 2013-07-12T18:20:13.210 回答