1
我有一个IE 11（也许其他版本）的问题，任何其他浏览器正常工作。溢出隐藏组中的元素
我在.btn-inner-group div内有两个按钮。 这个div有属性溢出：隐藏两个按钮的边缘。 当我使用资源管理器时，我将点击右键，两个按钮 都移动到左侧，整个右侧按钮可见（即使有部分我想隐藏）。
事情是我不想移动按钮。我想点击，显示菜单，就是这样。
下面是示例代码来测试：
http://jsfiddle.net/s6cq4d0y/3/
function initDropdown(container) {
// Check if container is defined.
// Default is body.
if(typeof container === 'undefined') {
container = 'body';
}
var element = $(container).find('.dropdown');
element.on('click', function(e) {
e.preventDefault();
});
// Finds dropdown inside desired container.
element.bind('shown.bs.dropdown', function(e) {
var dropdown = $(this);
var menuID = dropdown.attr('data-menu');
var menu = $('#' + menuID);
menu.show();
});
// Finds dropdown inside desired container.
element.bind('hide.bs.dropdown', function() {
var dropdown = $(this);
var menuID = dropdown.attr('data-menu');
var menu = $('#' + menuID);
menu.hide();
});
}
var $ = jQuery;
jQuery(document).ready(function() {
initDropdown();
});body {
background: #336699;
}
ul.buttons {
padding-left: 0;
margin: 20px 0;
}
ul.buttons li {
list-style: none;
margin-bottom: 10px;
}
ul.buttons li a {
width: 100%;
}
.btn-right {
margin-top: 40px;
}
.btn-right .btn {
float: right;
}
.btn {
border: none;
background-color: #f8f8f8;
font-size: 12px;
}
.btn-inner-group {
overflow: hidden;
}
.bevel-group {
float: left;
-webkit-transform: skew(-30deg);
transform: skew(-30deg);
background-color: #f8f8f8;
}
.bevel-group .btn {
background-color: transparent;
}
.btn.btn-bevel {
color: #333132;
padding: 14px 20px 14px 20px;
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
.bevel-group.bevel-left {
float: right;
margin-right: -16px;
padding-right: 16px;
}
.bevel-group.bevel-right {
float: left;
margin-left: -16px;
padding-left: 16px;
}
.bevel-group.bevel-grey, .bevel-group.bevel-grey.no-hover-effect {
background-color: #f8f8f8;
}
.bevel-group.bevel-grey .btn, .bevel-group.bevel-grey.no-hover-effect .btn {
color: #333132 !important;
}
.bevel-group.active, .bevel-group.bevel-blue, .bevel-group:hover, .bevel-group.no-hover-effect, .bevel-group.bevel-no-hover-effect {
background-color: #003594;
}
.bevel-group.active .btn, .bevel-group.bevel-blue .btn, .bevel-group:hover .btn, .bevel-group.no-hover-effect .btn, .bevel-group.bevel-no-hover-effect .btn {
color: #eee !important;
}
.bevel-left .dropdown-menu {
right: 0;
}
.btn-group .dropdown-menu > li > a {
white-space: normal !important;
}
.btn.btn-plus::after {
content: "\00a0\00a0\00a0\00a0\00a0\00a0+";
}
.btn.btn-more:hover, .btn.btn-learn-more:hover {
color: #fff;
background-color: #003594 !important;
}
.btn.btn-learn-more {
height: 50px;
line-height: 38px;
text-align: left;
padding-right: 140px;
padding-left: 20px;
color: #fff;
background: #003594 url('../images/buttons/learn-more.png') no-repeat right top;
}
.btn.btn-go {
height: 42px;
line-height: 30px;
text-align: left;
background: #f8f8f8 url('../images/buttons/go-blue.png') no-repeat right top;
}
.dropdown-menu {
box-shadow: none;
border: 0;
margin-top: 0;
left: auto;
right: auto;
width: 100%;
background-color: #f8f8f8;
}
.dropdown-menu a {
font-size: 12px;
line-height: 24px;
}
#first-btn-group-ip {
margin-top: 50px;
margin-left: 50px;
border: 1px solid red;
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Btn group: IP - Learn more \t/Practice Area -->
<div id="first-btn-group-ip" class="clearfix">
<div class="btn-group">
<div class="btn-inner-group clearfix">
<div class="bevel-group bevel-right active">
\t \t \t <a href="http://localhost:8888/hsm/web/intellectual-property/" id="learn-more-jumboton-ip" class="btn btn-bevel btn-group-left">
<span class="btn-label">Learn more</span>
</a>
\t \t \t </div>
\t \t <div class="bevel-group bevel-left bevel-grey no-hover-effect">
<div class="dropdown" data-menu="jumbotron-ip-practice-area">
\t \t \t \t <button class="btn btn-bevel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
\t \t \t \t \t <span class="btn-label">Practice Area</span>
\t \t \t \t \t <span class="caret"></span>
\t \t \t \t </button>
\t \t \t </div>
\t \t </div>
</div>
\t <ul id="jumbotron-ip-practice-area" class="dropdown-menu">
<li id="menu-item-448" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-448">
<a href="http://localhost:8888/hsm/web/intellectual-property?sp=204-2">Trade Marks</a>
</li>
<li id="menu-item-447" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-447">
<a href="http://localhost:8888/hsm/web/intellectual-property?sp=patents">Patents</a>
</li>
</ul>
</div>
</div>
<!--/Btn group: IP - Patent Guide/Trade Mark Guide -->你可以看到例子还的jsfiddle：http://jsfiddle.net/s6cq4d0y/3/
我已经试过很多东西，我认为这种行为是有目的的动机，主动elem ent应该完全可见。这非常好，但我不希望在这种情况下出现这种行为。你知道如何在IE中关闭这种行为吗？
感谢您的帮助！ Kuba
哪里是链接??? –
对不起，我不得不更新问题。堆栈不允许我插入JSFiddle链接。不知道为什么。 –
可能有问题，你试图插入链接，是的，你需要插入一些代码链接小提琴！ –