【发布时间】：2013-08-26 22:31:52
【问题描述】：
我在 div 上悬停时遇到了一些问题，它有边界半径。
当我悬停 div 时，有一条小线，其颜色与悬停颜色不相似。
html代码：
<div class="grid_veiw_case_active">
<div> some text</div>
<div class="delete_div">
<div class="delete"><p class="button_text"></p></div>
</div>
</div>
css(部分)代码：
.grid_veiw_case_active {
border-style: solid;
border-width: 1px;
border-color: #404040;
border-radius: 5px;
background: #7d7d7d;
width: 254px;
}
.grid_veiw_case_active .delete {
border-top: 1px solid #969696;
width: 100%;
height: 38px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background: #c1c0c0;
}
.grid_veiw_case_active .delete:hover {
background: #d06d70;
}
代码链接http://jsfiddle.net/Xbj3b/.
说明问题的图片
【问题讨论】：
-
你的浏览器和操作系统是什么？
-
它在我看来很棒，在 chrome 中，所以也许这是不同浏览器的问题？我会检查哪些浏览器支持圆角边框并从那里开始。
-
IMO 你担心 1 个像素。如果这不是一个基于设计的网站，并且您的用户看到 1px 的差距，我会更担心您的内容缺乏而不是 1px 的差距
-
我会（如果可能）使用不同的
border-color（例如#ddd）并在不同的浏览器中进行测试... -
巨大的css墙，做这么简单的事情。