我在 Chrome 上遇到 CSS 问题。 我有一个溢出的表格，有一个弹出按钮，点击时弹出窗口有绝对位置。 它在 Firefox 上运行时按预期工作:
但它在 Chrome 上运行不同:
我能做些什么来修复 Chrome 的行为吗？要获得与 Firefox 相同的行为？
附加: 我为元素使用 Bootstrap 。这是我制作的表格:
<table class="table table-striped table-bordered table-hover">
这里是按钮的 td :
<td>
<div class="btn-group dropdownn">
<button id="dLabel" type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" id="tombol_action">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
这里是我在弹出窗口打开时修改的 css:
<style>
.dropdownn.open{
position: absolute;
}
</style>
请检查这个，我已经制作了原型(prototype)http://jsfiddle.net/gjtcyL7y/3/
已修复: http://jsfiddle.net/gjtcyL7y/10/ 感谢 Ashish
最佳答案
$(document).ready(function(){
$('.mydropdown').on('shown.bs.dropdown', function (e) {
var myBtn = $(this);
var offset_t = $(this).offset().top - $(window).scrollTop();
var offset_l = $(this).offset().left - $(window).scrollLeft();
console.log(offset_l, offset_t);
myBtn.find(".dropdown-menu").css({"position":"fixed","left":offset_l,"top":offset_t + myBtn.height()});
});
$('.mydropdown').on('hidden.bs.dropdown', function () {
var myBtn = $(this);
myBtn.find(".dropdown-menu").removeAttr("style");
});
$("#wrap").on("scroll", function(e) {
var myBtn = $('.mydropdown.open');
var offset_t = $(myBtn).offset().top - $(window).scrollTop();
var offset_l = $(myBtn).offset().left - $(window).scrollLeft();
myBtn.find(".dropdown-menu").css({"position":"fixed","left":offset_l,"top":offset_t + myBtn.height()});
});
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div style="width:850px; overflow: scroll;height:450px;" id="wrap">
<table class="table table-striped table-bordered table-hover" id="example" ccellpadding="0" cellspacing="0" border="0" width="100%">
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
<th>Head4</th>
<th>Head5</th>
<th>Head6</th>
<th>Head7</th>
<th>Head8</th>
</tr>
</thead>
<tbody>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
</tr> <tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
</tr>
<tr height="48px">
<td>1</td>
<td>Gabriel</td>
<td>Some value is here</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>Some value is here and little longer</td>
<td>
<div class="btn-group mydropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span> Pilih <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="link/1" title="View SPK">
<span class="glyphicon glyphicon-check"></span> View SPK</a></li>
<li><a href="link/1" title="Edit SPK">
<span class="glyphicon glyphicon-edit"></span> Edit SPK</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>关于html - Chrome 上的 Css 溢出和绝对，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29910909/