Chrome 中的按钮填充

发布于 2024-10-20 08:10:34 字数 725 浏览 1 评论 0原文

我想做一种菜单，当您将鼠标悬停在该菜单项上时，它会获得与实际页面相同的颜色。例如，像这里 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;
}

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

原文

I want to do the kind of menu, where when you hover the item, it get's the same color as the actual page.
e.g. like here http://www.css3.info/

It works fine with Mozilla, but in Chrome I always get a very thin line above the div, so the transition is not fluent. I have set all paddings to 0px.

The style for button looks like this:

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

and for the 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;
}

Can you please help me to solve this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

涙—继续流 2024-10-27 08:10:34

由于缺少 HTML 标记，我在这里进行猜测，但是：

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

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

Going on a guess here due to the lack of HTML markup but:

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

If you could add more precise markup I could help further

回复收藏 0 原文

抱猫软卧 2024-10-27 08:10:34

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

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

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

box-sizing: border-box;

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

I'm not completely sure that this'll solve your problem, but for those with button padding issues, in general, it might be to do with box-sizing:

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

At least for Chrome, button elements are given a default of:

box-sizing: border-box;

So any width/height set will be the actual visible width/height, with any padding/border taking up space within that width/height.
This is different to most other elements, where the default is visible width equals width + padding + borders. (This is box-sizing: content-box;).

回复收藏 0 原文

~没有更多了~