Why Does My Button Have a 1px Gap at the Bottom in Chrome and Safari?

Sub-Pixel Discrepancy in Button Rendering Across Browsers

The discrepancy in rendering a component consisting of an input field with an embedded button stems from variations in sub-pixel calculations among browsers.

Problem Explanation

Firefox correctly renders the button with a 100% height and visible borders, whereas Chrome and Safari introduce a 1px gap at the bottom. This issue arises because Chrome rounds margins to integers, resulting in a miscalculation of the button's bottom margin.

Solution

To resolve this cross-browser rendering disparity, transfer the margin usage from the button to a transparent border. Set the button's border to 1px and apply the background-clip: padding-box property to prevent transparency from affecting the background. Additionally, replace em-based padding with fixed pixel values to address a zooming-related bug in Chrome.

Final Code Snippet

<code class="css">.wrapper {
  position: relative;
  width: 60%;
  margin: 1em;
  background-color: #ccc;
}

input {
  border: 1px solid red;
  width: 100%;
  background-color: limegreen;
  line-height: 3em;
  padding: 10px;
}

button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid transparent;
  width: 7em;
  margin: 0px;
  background-clip: padding-box;
  box-shadow: inset 0px 0px 0px 2px black;
}</code>

The above is the detailed content of Why Does My Button Have a 1px Gap at the Bottom in Chrome and Safari?. For more information, please follow other related articles on the PHP Chinese website!