ie11 css rotate - 背景元素不可点击

Question

我正在创建一个选项卡界面,其中活动选项卡具有旋转变换,允许预览下一个选项卡.单击预览区域中的按钮将打开下一个选项卡.

除了IE11之外,这在所有浏览器中都能正常工作.请参阅下面的代码段.

$(document).ready(function() {
  $('button').click(function() {
    alert('Button was clicked');
  });
})

* {
  margin: 0;
  padding: 0
}

.container {
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.container .tab {
  position: absolute;
  top: 0;
  left: 0;
  width: 185%;
  height: 140%;
  transform: translateX(-50%) rotate(-25deg);
  transform-origin: 50% 0;
  overflow: hidden;
}

.container .tab .content {
  transform: rotate(25deg);
  transform-origin: 0 0;
  margin-left: 50%;
  position: relative;
  height: 75%;
  width: 55%;
}

.container .tab-1 {
  z-index: 2;
}

.container .tab-1 .content {
  background-color: red;
}

.container .tab-2 {
  z-index: 1;
  height: 200%;
}

.container .tab-2 .content {
  background-color: green;
}

.container .tab-2 button {
  position: absolute;
  bottom: 37%;
  right: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="tab tab-1">
    <div class="content"></div>
  </div>

  <div class="tab tab-2">
    <div class="content">
      <button type="button">
        Click me
      </button>
    </div>
  </div>
</div>

我认为问题是虽然IE可见地执行旋转,但原始边界区域本身不会旋转,因此点击不会应​​用于背景元素.

任何人都有任何想法如何解决这个问题？jsfiddle:https://jsfiddle.net/bmq2e2ae/1/

Answer 1

对于这个工作在IE,你可以添加pointer-events: none的.tab .content,并带回pointer-events到初始状态的儿童.tab .content.

演示:

$(document).ready(function() {
  $('button').click(function() {
    alert('Button was clicked');
  });
})

* {
  margin: 0;
  padding: 0
}

.container {
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.container .tab {
  position: absolute;
  top: 0;
  left: 0;
  width: 185%;
  height: 140%;
  transform: translateX(-50%) rotate(-25deg);
  transform-origin: 50% 0;
  overflow: hidden;
}

.container .tab .content {
  transform: rotate(25deg);
  transform-origin: 0 0;
  margin-left: 50%;
  position: relative;
  height: 75%;
  width: 55%;
}

.container .tab-1 {
  z-index: 2;
}

.container .tab-1 .content {
  background-color: red;
}

.container .tab-2 {
  z-index: 1;
  height: 200%;
}

.container .tab-2 .content {
  background-color: green;
}

.container .tab-2 button {
  position: absolute;
  bottom: 37%;
  right: 20px;
}

/* IE Hack: disable pointer-events */
.container .tab .content {
  pointer-events: none;
}

/* IE Hack: enable pointer-events for descendants */
.container .tab .content > * {
  pointer-events: initial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="tab tab-1">
    <div class="content"></div>
  </div>

  <div class="tab tab-2">
    <div class="content">
      <button type="button">
        Click me
      </button>
    </div>
  </div>
</div>

你也将这个hack包装在媒体查询浏览器中,只在IE中进行评估

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
  /* IE Hack: disable pointer-events */
  .container .tab .content {
    pointer-events: none;
  }

  /* IE Hack: enable pointer-events for descendants */
  .container .tab .content > * {
    pointer-events: initial;
  }
}