CODEWITHSUNDEEP
cssbuttonhyperlinkvertical-alignment
SeinopSys
SeinopSys

Reputation: 8937

Buttons & links with same styles and content don't line up

I'm trying to style each button and a.btn to look the same across all browsers. Using the following styles the 2 elements don't line up in Chrome and Firefox.

#wrap {
  border: 2px solid red;
}

button::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}
a.btn, button {
  display: inline-block;
  border: 2px solid transparent;
  border-radius: 3px;
  color: #fff;
  background-color: #777;
  padding: 2px 5px;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 16px;
  height: 27.2px;
  text-decoration: none;
  opacity: .85;
  cursor: pointer;
  box-sizing: border-box;
}
<div id="wrap">
  <a href="#" class="btn">Link</a>
  <button>Link</button>
</div>

I've tried changing the vertical-align to bottom, but while that does move the elements into a more aligned state, the text on the button itself looks mis-aligned still (demo below).

#wrap {
  border: 2px solid red;
}

button::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}
a.btn, button {
  display: inline-block;
  border: 2px solid transparent;
  border-radius: 3px;
  color: #fff;
  background-color: #777;
  padding: 2px 5px;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 16px;
  height: 27.2px;
  text-decoration: none;
  opacity: .85;
  cursor: pointer;
  box-sizing: border-box;

  vertical-align: bottom;
}
<div id="wrap">
  <a href="#" class="btn">Link</a>
  <button>Link</button>
</div>

How can I make both elements display the same way in both Chrome and Firefox?

Upvotes: 0

Views: 59

Answers (2)

Johannes
Johannes

Reputation: 67778

Erase the height setting from the rule and fine-tune the height only with the paddingparameters: 

#wrap {
  border: 2px solid red;
}

button::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}
a.btn, button {
  display: inline-block;
  border: 2px solid transparent;
  border-radius: 3px;
  color: #fff;
  background-color: #777;
  padding: 2px 5px;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 16px;
  text-decoration: none;
  opacity: .85;
  cursor: pointer;
  box-sizing: border-box;
}
<div id="wrap">
  <a href="#" class="btn">Link</a>
  <button>Link</button>
</div>

Upvotes: 1

user5802338
user5802338

Reputation:

Chrome and Firefox both use different rendering engines to display html (Chrome uses Blink and Firefox uses Gecko). Different browsers use different rendering engines so I don't think it will look exactly the same across all browsers.

Upvotes: 0

Related Questions