CSS菜单边框在悬停状态下显示为残破？

Question

我似乎无法获得您的帮助，因为我一生都无法弄清楚为什么我的CSS菜单边框（特别是中间的）似乎断了？几乎看起来像有1个额外的白色边框像素之类的东西？

渲染浏览器为MS Edge

这里是问题的图片（悬停）：

这里是有问题的CSS：

        .tabs {
            display: flex;
            flex-wrap: wrap;
            max-width: 1500px;
            background: transparent;
        }

        .input {
            position: absolute;
            opacity: 0;
        }
        .label {
            width: 100%;
            padding: 10px;
            background: #e5e5e5;
            cursor: pointer;
            font-weight: bold;
            color: #7f7f7f;
            transition: background 0.1s, color 0.1s;
        }

        .label:hover {
            background: #d8d8d8;
        }

        .label:active {
            background: #ccc;
        }

        .input:focus + .label {
            z-index: 1;
        }

        @media (min-width: 600px) {
            .label {
                width: auto;
            }
        }

        .panel {
            display: none;
            padding: 30px 30px 30px;
            background: #fff;
            border: 1px solid green;
    height: 700px;
        }

        @media (min-width: 600px) {
            .panel {
                order: 99;
            }
        }

.input:checked + .label {
    background: #fff;
    color: #000;
    border-top: 1px solid green;
    border-left: 1px solid green;
    border-right: 1px solid green;
    position: relative;
    z-index: 1;
}

.input:checked + .label + .panel {
    display: block;
    position: relative;
    top: -1px;
    z-index: 0;
}

这里是有问题的HTML：

            <div class="tabs" style="margin: auto;">
                <input name="tabs" type="radio" id="tab-1" checked="checked" class="input"/><label for="tab-1" class="label">Workspace Info</label>
                <div class="panel">
                    <p>The orange (specifically, the sweet orange) is the fruit of the citrus species Citrus × sinensis in the family Rutaceae</p>
                    <p>The fruit of the Citrus × sinensis is considered a sweet orange, whereas the fruit of the Citrus × aurantium is considered a bitter orange. The sweet orange reproduces asexually (apomixis through nucellar embryony); varieties of sweet orange arise through mutations.</p>
                </div>

                <input name="tabs" type="radio" id="tab-2" class="input"/><label for="tab-2" class="label">Employee Info</label>
                <div class="panel">
                    <p>The tangerine (Citrus tangerina) is an orange-colored citrus fruit that is closely related to, or possibly a type of, mandarin orange (Citrus reticulata).</p>
                    <p>The name was first used for fruit coming from Tangier, Morocco, described as a mandarin variety. Under the Tanaka classification system, Citrus tangerina is considered a separate species.</p>
                </div>
                <input name="tabs" type="radio" id="tab-3" class="input"/><label for="tab-3" class="label">Service Requests</label>
                <div class="panel">
                    <p>A clementine (Citrus ×clementina) is a hybrid between a mandarin orange and a sweet orange, so named in 1902. The exterior is a deep orange colour with a smooth, glossy appearance. Clementines can be separated into 7 to 14 segments. Similarly to tangerines, they tend to be easy to peel.</p>
                </div>
            </div>

Answer 1

除非您将每个标签重叠一个像素，否则这是正常现象。发生的是，您告诉一个标签在其侧面添加边框，但他的邻居却没有。