Question

Anyone know how to get around this problem? I’m doing some custom button styling. It looks fine in Firefox:

But it doesn’t look right in Chrome 15.0.874.106:

The top border has some dark pixels in the center of the button. They only show up when the button gets to be at least a certain width.

Here’s the CSS:

.mybutton, .mybutton:visited {
  display: inline-block;
  padding: 5px 10px 6px;
  color: #fff;
  text-decoration: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  position: relative; 
  cursor: pointer;
  font-size: 13px; 
  font-weight: bold; 
  line-height: 1; 
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  background-color: #ccc;
}

.mybutton:active { 
  top: 1px; 
}
.mybutton:hover { 
  background-color: #aaa; 
  color: #fff; 
}

I’ve searched for other mentions of this problem but so far haven’t found anything. Anyone else encounter this before?

Answer 1

It appears to be this

border-bottom: 1px solid rgba(0,0,0,0.25);

that is causing the problem.

When I remove it, all is good… even with many words in the button.

Example: http://jsfiddle.net/kW3u4/2/

Tested on Chrome 15.0.874.106 on Windows