0

I created an X button using CSS only. It displays fine in all browsers besides on ie11. In ie11 the button stacks over a border but when it's clicked it moves slightly down to the correct place it's suppose to be. I have no clue on how to fix this and have tried a bunch of different ways. This code is scss btw.

   button {
    width: 50px;
    height: 50px;
    right: 15px;
    top: 15px;
    padding: 0;
    position: absolute;
    border: none;
    background-color: transparent;

    &:hover { cursor: pointer; }

    &:before, &:after {
        content: '';
        width: 100%;
        height: 2px;
        background-color: blue;
        display: block;
        position: absolute;
    }

    &:before {
        -webkit-transform: rotateZ(45deg);
        -moz-transform: rotateZ(45deg);
        -ms-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
    }
    &:after {
        -webkit-transform: rotateZ(-45deg);
        -moz-transform: rotateZ(-45deg);
        -ms-transform: rotateZ(-45deg);
        transform: rotateZ(-45deg);
    }
}
}
rnkwill
  • 11
  • 1
  • 5

2 Answers2

0

I would use a media query plus a position property plus an !important (not recommended but we want to be absolutely sure) to forbid the button from moving anywhere if the browser is ie10 or higher. The code I would use would be something like this:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {  /*media query for ie10+*/
    button {
        position:absolute !important;
    }
}

Failing that, there is another question here which also mentions jumping elements but that was from ie8. The issue was solved by using display:block.

0

What version of IE11 are you using? The code runs well in my IE11 which version is 11.116.18362.0. I made a simple demo:

button {
  width: 50px;
  height: 50px;
  right: 15px;
  top: 15px;
  padding: 0;
  position: absolute;
  border: none;
  background-color: transparent; }
  button:hover {
    cursor: pointer; }
  button:before, button:after {
    content: '';
    width: 100%;
    height: 2px;
    background-color: blue;
    display: block;
    position: absolute; }
  button:before {
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    transform: rotateZ(45deg); }
  button:after {
    -webkit-transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    -ms-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg); }
<link rel="stylesheet" type="text/css" href="demo-style.css">
<button></button>

I use your scss to compile it down to css file and then import it into the page. The 'X' won't move in IE11. If you're using older version of IE11, I suggest that you could move to the latest version and try it again.

Yu Zhou
  • 11,532
  • 1
  • 8
  • 22