瀏覽器之間的CSS邊框差異

Question

我正在使用純CSS制作下拉菜單，但遇到一些困難，無法在所有瀏覽器中使下拉菜單看起來相同。

我已經嘗試了所有可以想到的方法-將邊距設置為零，將填充設置為零...似乎沒有任何效果。

http://jsfiddle.net/mf9cS/

Safari完美呈現：

在此處輸入圖片說明

Firefox在標題和下拉列表之間存在一個神秘的鴻溝：

在此處輸入圖片說明

而且Chrome在右上凹角的邊框之外丟失了一個像素：

在此處輸入圖片說明

CSS：

.container {
    position:absolute;
    top:50px;
    left:50px;
    margin:0px;
}
.title {
    position:relative;
    display:inline-block;
    height:25px;
    overflow:hidden;
    font-size:15pt;
    padding:0px;
    padding-top:1px;
    margin:0px;
}

.title:hover {
    height:200px;
}

.title:hover > .links {
    width:150px;
}

body {
    font-size:14pt;
}

.links {
    width:0px;
    border:1px solid grey;
    visibility:hidden;
    padding-top:0px;
    margin-top:0px;
}
.titletext {
    margin-left:0px;
    margin-top:0px;
    height:25px;
    margin-bottom:0px;
}

.title:hover > .titletext {
    border:1px solid grey;
    border-bottom:1px solid white;
}
.title:hover > .links {
    visibility:visible;
}

a {
    text-decoration:none;
    color:grey;
    width:150px;
    display:block;
}

a:hover {
    background-color:purple;
}

HTML：

<html>
<body>
    <div class="container">
        <div class="title">
            <span class="titletext">
                This is a test
            </span>
            <div class="links">
                <a href="">Link 1 </a>
                <a href="">Link 2 </a>
                <a href="">This is the third link</a>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

問題是標題跨度元素的白色邊框。 所有瀏覽器都以不同的方式呈現邊框。 在chrome和firefox中，白色邊框正觸碰到該元素的末端，您會在角落看到空白。 將邊框半徑設置為2px，空間將消失。 我敢肯定，但這是演示。

`border-bottom-right-radius:2px`

http://jsfiddle.net/mf9cS/3/

瀏覽器之間的CSS邊框差異

問題描述

1 個解決方案

解決方案1
0 已采納 2014-05-18 03:42:37

瀏覽器之間的CSS邊框差異

問題描述

1 個解決方案

解決方案1 0 已采納 2014-05-18 03:42:37

解決方案1
0 已采納 2014-05-18 03:42:37