gpt4 book ai didi

html - Chrome 上的 Css 溢出和绝对

转载 作者:太空宇宙 更新时间:2023-11-03 17:34:52 26 4
gpt4 key购买 nike

我在 Chrome 上遇到 CSS 问题。我有一个溢出的表格,有一个弹出按钮,点击时弹出窗口有绝对位置。它在 Firefox 上运行时按预期工作:

Firefox running

但它在 Chrome 上运行不同: enter image description here

我能做些什么来修复 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com