logo标签列表

IE11 CSS旋转 - 背景元素不可点击

javascriptjqueryhtmlcssinternet-explorer
13

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

这在除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/

4个回答
7
为了在IE中实现此功能，您可以为 .tab .content 添加 pointer-events: none 并将子元素的 pointer-events 返回到初始状态。
演示： 

$(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 更新了答案，即使您想在活动选项卡上添加按钮也可以正常工作。 - Vadim Ovchinnikov
太棒了。这看起来是目前最好的解决方案。谢谢你。 - MAX POWER
@ConnorsFan 这很奇怪。我在IE11中收到了“点击我”警报。OP也是这样。 - Vadim Ovchinnikov
我可以选择“Click me”文本，但是我的IE11上的按钮无法点击。也许使用pointer-events: all（而不是pointer-events: initial）可以解决问题？ - ConnorsFan
1
是的，它可以使用 pointer-events: all。我使用你的代码片段进行了测试。我不知道我的IE配置有什么特殊设置，使它的行为与你的不同... - ConnorsFan
显示剩余5条评论
3
的父元素.tab-2的z-index比其他.tab-1低。因此，在IE中，尽管不可见，.tab-1仍然覆盖了所有内容，导致无法单击。
将button元素从.tab-2 .content元素中取出，并放置在容器内的两个元素之后。然后，设置position:absolute和比.container .tab-2和.container .tab-1都高的z-index。重新定位即可。 注意：由于元素高度，您必须在下面的示例中滚动才能看到按钮。 JSFiddle演示 

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

回答不错，但我不能把按钮放在选项卡外面。我只是用按钮作为一个快速的例子，但实际上每个选项卡都会有自己的按钮，具有自己的样式和文本。 - MAX POWER
谢谢。我在想，是否有可能将每个选项卡的按钮放置在实际选项卡元素之前/之后。然后给它们不同的类名以适当地进行样式和定位？例如，使用.tab-2-button和.tab-1-button作为类或ID名称。 - Donald Powell
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>

2
当您使用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+

Firefox：3.5+

Safari：3.1+

IE：9.0+

Opera：10.5+

需求示例1：：您可以只旋转第二个 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属性不需要供应商前缀。 - MAX POWER
@GSTAR：我修改了CSS代码，现在在IE浏览器上完美运行符合您的要求。请检查并告诉我。 - Alex Mac
@GSTAR：你说得对，在IE11中，transform属性不需要供应商前缀，但在Safari和其他浏览器中仍然需要。 - Alex Mac
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接