CODEWITHSUNDEEP
htmlcssinternet-explorer
Forrest
Forrest

Reputation: 107

Internet Explorer is showing unwanted space in link

I have a link, which has a transition on hover.

Here is the jsfiddle example: http://jsfiddle.net/Forresty/qc4rev6q/

Hover over the link in Chrome, Firefox or Opera and you will see it behaves as expected.

However, in Internet Explorer 11, there is always a tiny gap somewhere around the edge of the hover. It makes no sense to me. Is this just a browser bug? Or is there something I can do to fix this?

HTML

<a href="#" class="font_smooth btn btn_about">
  <span class="btn_text_onTop">LINK</span>
</a>

CSS

.btn {
  position: relative;
  display: inline-block;
  border: none;
  font-family: fira sans;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.125em;
  font-weight: 700;
}
.btn_about {
  color: #000;
  font-size: 0.8em;
  background: none;
  font-size: 1.5em;
  padding: 1.5em 3.5em;
  //display: inline-block;
  margin: 1.875em auto 0;
  transition: all 0.3s;
  border: 0.1875em solid #000;
  overflow: hidden;
}
.btn_text_onTop {
  position: relative;
  z-index: 2;
}
.btn_about:after {
  content:'';
  position: absolute;
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background: black;
  z-index: 1;
  transition: all 0.3s;
}
.btn_about:hover, .btn_about:active {
  color: white;
}
.btn_about:hover:after, .btn_about:active:after {
  width: 100%;
}

In the example I've just linked, the right side of the hover isn't covered. However, on the actual site, it varies depending on the size of the padding. Sometimes it's the left, right and bottom, sometimes it's the bottom and in this case, it's the right.

Many thanks in advance

Upvotes: 1

Views: 451

Answers (1)

C3roe
C3roe

Reputation: 96240

Those seem to be rounding differences, coming from the 0.1875em border-width … IE dev tools show calculated value as 4.32px – as soon as I replace that with 4px in your CSS, the effect is gone.

So if you can live with an absolute value, use one and it should be fixed. If not, at least try to find a value that does give a “rounder” pixel value for different font sizes.

Upvotes: 2

Related Questions