Question

我在纯CSS中制作了一个下拉菜单，我遇到了一些困难，使得每个浏览器的下拉列表看起来都一样。

我已经尝试了我能想到的一切 - 将边距设置为零，将填充设置为零......似乎没有任何效果。

http://jsfiddle.net/mf9cS/

Safari完美渲染：

enter image description here

Firefox在标题和下拉列表之间存在神秘的差距：

enter image description here

Chrome在右上角的边框处缺少一个像素：

enter image description here

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 个答案: