http://jsfiddle.net/36ykrp9x/5/
HTML
<div class="container">
<button>O</button><button>O</button>
</div>
CSS
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
In trying to resolve a visual bug, the provided code demonstrates a thin line flickering between two buttons on Chrome 39. Surprisingly, this issue is not observed in Firefox or Safari. The buttons must be centered horizontally within a hierarchy with 100% width, and adjusting margins has proven unsuccessful in solving the problem without creating overlaps. Although using rgba(r,g,b,a) for the background color can address the issue, I am eager to find a solution that does not rely on this method.
Furthermore, fixed-width elements do not alleviate the problem as the button group must also be centered within them, which revives the thin line glitch. Avoiding JavaScript solutions, I am determined to find a CSS-based fix for this issue. Is there any way to resolve this without resorting to scripting?