我正在创建一个标签界面,其中活动标签有一个旋转变换,允许预览下一个标签。单击预览区域中的按钮将打开下一个选项卡。
除了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>
&#13;
我认为问题是虽然IE可见地执行旋转,但原始边界区域本身不会旋转,因此点击不会应用于背景元素。
有人知道如何解决这个问题吗? jsfiddle:https://jsfiddle.net/bmq2e2ae/1/
答案 0 :(得分:7)
要在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;
}
}
答案 1 :(得分:4)
当您使用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 +
需求中的第一个示例:您可以只旋转第二个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>
这会对你有所帮助。如果它不适合你,请告诉我。
答案 2 :(得分:3)
按钮的父元素.tab-2
的{{1}}设置低于另一个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>
答案 3 :(得分: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');
});
})
&#13;
* {
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%;
}
&#13;
<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>
&#13;