Question

我想做那种菜单，当你悬停项目时，它会与实际页面颜色相同。例如像这里http://www.css3.info/

它适用于Mozilla，但在Chrome中我总是在div上方得到一条很细的线，所以过渡不流畅。我已将所有填充设置为0px。

按钮的样式如下所示：

button
{            
  background: #fff;   
  font-size: 14px;   
  color: #555;   
  border: 1px #ddd solid;
  border-bottom: none;
}

和div

.main_div
{
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  -moz-border-radius-bottomright: 15px;
  -moz-border-radius-bottomleft: 15px;
  margin-left:0;
  margin-right:0;
  width:100%;
  background-color:#d0f0f6;
  text-align:left;
  padding:0px;
}

你能帮我解决这个问题吗？

Answer 1

由于缺少HTML标记而在此猜测，但是：

.button
{            
  background: #fff;   
  font-size: 14px;   
  color: #555;   
  border: 1px #ddd solid;
  border-bottom: none;
  margin-bottom: -1px; //Note added line here
}

如果您可以添加更精确的标记，我可以提供更多帮助

Answer 2

我不完全确定这会解决您的问题，但对于那些有按钮填充问题的人来说，一般来说，它可能与盒子大小有关：

http://css-tricks.com/box-sizing/

至少对于Chrome，按钮元素的默认值为：

box-sizing: border-box;

因此，任何宽度/高度设置都将是实际可见宽度/高度，任何填充/边框占据该宽度/高度内的空间。这与大多数其他元素不同，其中默认值是可见宽度等于宽度+填充+边框。（这是盒子大小：内容框;）。

Chrome中的按钮填充

2 个答案: