ie11 css旋转-背景元素不可点击答案

【问题标题】：ie11 css rotate - background element not clickableie11 css旋转-背景元素不可点击
【发布时间】：2018-01-06 10:00:15
【问题描述】：

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

这在除 IE11 之外的所有浏览器中都可以正常工作。请参阅下面的 sn-p。

$(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/

【问题讨论】：

标签： javascript jquery html css internet-explorer

【解决方案1】：

当你使用 CSS3 TRANSFORMS 时，你需要为不同的浏览器使用不同的标签。

你需要像下面提到的那样使用。

-webkit-transform: rotate(-25deg) translateX(-50%);
-webkit-transform-origin: 50% 0%;
-moz-transform: rotate(-25deg) translateX(-50%);
-moz-transform-origin: 50% 0%;
-o-transform: rotate(-25deg) translateX(-50%);
-o-transform-origin: 50% 0%;
-ms-transform: rotate(-25deg) translateX(-50%);
-ms-transform-origin: 50% 0%;
transform: rotate(-25deg) translateX(-50%);
transform-origin: 50% 0%;

这将在以下提到的浏览器版本中工作和支持。

Chrome：4.0+

火狐：3.5+

Safari：3.1+

IE : 9.0+

歌剧：10.5+

要求的第一个示例：您可以只旋转第二个 div，而不是旋转两个 div，它会起作用。请检查以下解决方案。

$(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 {

    width: 185%;
    height: 140%;
    overflow: hidden;
}

.container .tab .content {
    position: relative;
    height: 100%;
    width: 100%;
}

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

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

.container .tab-2 {
    z-index: 3;
    transform: translateX(-40%) rotate(-25deg);
    transform-origin: 50% 0;
}

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

.container .tab-2 button {
    position: absolute;
    right: 60px;
    top:20px;
    transform: translateX(50%) rotate(25deg);
    transform-origin: 50% 0;
}

<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>

需求中的第二个示例。：在一个 div 中，您可以实现此目的。请在下方查看。

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

* {
    margin: 0;
    padding: 0
}

.container {
    position: relative;
    overflow: hidden;
}
.container .tab{
    z-index: 2;
    margin-bottom:10px;
    position: relative;
    display: block;
    width: 400px;
    height: 200px;
    background-color: red;
    overflow: hidden;
    
}

.container .content {
    z-index: 62;
    width: 200px;
    height: 120px;
    background-color: green;
    position: absolute;
    bottom: -72px;
    right: -35px;
    transform: rotate(-25deg) ;
    -webkit-transform: rotate(-25deg) ;
    -moz-transform: rotate(-25deg) ;
    -o-transform: rotate(-25deg) ;
    -ms-transform: rotate(-25deg) ;
}
.container button{
  border:1px solid #eee;
}
.container a {
  color:#FFF;
}

.container button,
.container a {
    position: absolute;
    display: block;
    margin-right: 30px;
    right: 15px;
    bottom: 80px;
    transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    cursor: pointer;
}

<!doctype html>
<html>
    <head>
        <title>IE10/11 Media Query Test</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
      <div class="container">
          <div class="tab tab-1">
          Tab With Link 
              <div class="content">
                  <a  href="https://www.google.co.in">Link</a>
              </div>
          </div>

          <div class="tab tab-2">
          Tab With Button 
              <div class="content">
                  <button id="check_btn" type="button">Click me</button>
              </div>
          </div>

          <div class="tab tab-3">
          Tab Without Link or Button
              <div class="content">
              </div>
          </div>

          <div class="tab tab-4">
              Only Tab with no Green Area
          </div>
      </div>
    </body>
</html>

这将对您有所帮助。如果它不适合你，请告诉我。

【讨论】：

你测试过这个吗？这没什么区别。 IE11 中的 transform 属性也不需要 vendor 前缀。
@GSTAR：我更改了 CSS 代码，并根据您的要求在 IE 中完美运行。请检查并告诉我。
@GSTAR ：你说得对，IE11 中的 transform 属性不需要供应商前缀，但在 Safari 和其他浏览器中需要。

【解决方案2】：

为了在 IE 中工作，您可以为.tab .content 添加pointer-events: none 并将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 包装在媒体查询浏览器 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;
  }
}

【讨论】：

好主意。这是否意味着活动选项卡中的任何内容都无法单击？例如。超链接？我们可以覆盖任何超链接的指针事件属性吗？
@GSTAR 更新了答案，即使您想在活动标签上添加按钮。
@GSTAR 您也可以将此 IE hacky 样式仅应用于活动选项卡，而不是每个选项卡。仅取决于您的要求。
太棒了。这看起来是迄今为止最好的解决方案。谢谢。
是的，它适用于pointer-events: all。我用您的代码 sn-p 的副本对其进行了测试。我不知道我的 IE 配置中有什么特殊设置，这使它的行为与您的不同......

【解决方案3】：

您可以旋转第二个选项卡（带有按钮的选项卡），而不是旋转第一个选项卡。它将允许将第二个选项卡保留在第一个选项卡的顶部。你可以在this jsfiddle看到结果。

$(document).ready(function() {
    $('button').click(function(e) {
    	e.stopPropagation();
        alert('Button was clicked');
    });
    $('.tab-1').click(function() {
        alert('Tab1 was clicked');
    });
    $('.tab-2').click(function() {
        alert('Tab2 was clicked');
    });
})

* {
    margin: 0;
    padding: 0
}

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

.container .tab {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.container .tab .content {
    position: relative;
    height: 100%;
    background-color: red;
}

.container .tab-2 {
    transform: translateX(63%) translateY(100%) rotate(-25deg);
    transform-origin: 0% 0%;
    overflow: hidden;
}

.container .tab-2 .content {
    background-color: green;
    transform: rotate(25deg) translateX(-63%) translateY(-100%);
    transform-origin: 0% 0%;
}

.container .tab-2 button {
    position: absolute;
    bottom: 4%;
    right: 3%;
}

<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">
            Tab 1
        </div>
    </div>
    <div class="tab tab-2">
        <div class="content">
            Tab 2
            <button type="button">
                Click me
            </button>
        </div>
    </div>
</div>

【讨论】：

【解决方案4】：

按钮的父元素.tab-2 的z-index 设置低于另一个.tab-1。所以在 IE 中 .tab-1 覆盖了所有内容，当尝试点击时，即使不可见。

将button 元素从.tab-2 .content 元素中取出，然后放在容器内。然后设置position:absolute 和更高的z-index，然后设置.container .tab-2 和.container .tab-1。重新定位。

注意：由于元素高度，您必须在下面的示例中滚动才能看到按钮。

JSFiddle Demo

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

* {
  margin: 0;
  padding: 0
}

.container {
  width: 500px;
  height: 300px;
  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 button {
  position: absolute;
  bottom: 5%;
  right: 10px;
  z-index: 10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="container">
  <div class="tab tab-1">
    <div class="content">Tab 1</div>
  </div>
  <div class="tab tab-2">
    <div class="content">Tab 2</div>
  </div>
  <button type="button">Click me</button>
</div>

【讨论】：

很好的答案，但我不能在选项卡之外使用按钮。我只是将按钮用作快速示例，但实际上每个选项卡都有自己的按钮，具有自己的样式和文本.
谢谢.. 只是想知道是否不可能将每个选项卡的按钮放置在实际选项卡元素之后/之前。然后给他们不同的类名来适当地设置样式和位置？例如 .tab-2-button 和 .tab-1-button 用于类或 id 名称。