Question

我想创建一个导航栏。 <div> s应包含<a> s。所以我创建了以下代码（简化，仅限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>跳出内的内容，并且一个<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;

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

你知道发生了什么吗？或者你可能有一个更好的解决方案来修复弹跳链接？

Answer 1

只需在.menuStripItem

上添加此css规则即可修复它

border: 1px solid #FFFFFF;

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

click for fiddle

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

奇怪的过渡行为与边界一起

1 个答案: