gpt4 book ai didi

html - 位置 :absolute in Firefox

转载 作者:行者123 更新时间:2023-11-28 18:39:21 24 4
gpt4 key购买 nike

我正在尝试将一个简单的 2 列页面放在一起,左侧是文本,右侧是各种 Logo 和其他内容。在右栏的最底部,我需要放置一些文本。一个简单的 position: absolute;宽度:250px; bottom: 0; 似乎是我所需要的。这是我想出的代码,也托管了 here :

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin: 0px;
background-color: #eee;
}#content{
background: white;
width: 900px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
}#text{
padding-left: 8px;
padding-right: 8px;
}.left{
width: 634px;
border-right: 2px solid black;
}.right{
width: 250px;
text-align: center;
position: relative;
}.bottom{
position: absolute;
width: 250px;
bottom: 0;
}
</style>
</head>
<body>
<center>
<div id="content">
<div id="body">
<table border=0>
<tr valign="top">
<td id="text" class="left">
Some text
</td><td class="right">
<center class="bottom">
Bottom
</center>
</td>
</tr>
</table>
</div>
</div>
</center>
</body>
</html>

这个解决方案适用于除 Firefox 之外的所有浏览器。 Firefox 几乎将元素设置为 position:fixed,将其锁定在屏幕底部,而不是元素底部(通常不在屏幕底部)。我似乎找不到其他人有这个问题,这意味着我做错了什么。我已经搞砸了几个小时,但结果一直没有改变。任何帮助将不胜感激。

最佳答案

如果我理解正确的话——firefox 与规范几乎是同步的。你可以看到它的详细信息here

现在回答“为什么”的问题(其他人已经回答了如何:)。根据我的理解,规范没有说明(重新)计算页面滚动的位置。这在很大程度上取决于实现 IMO。如果绝对定位元素不存在相对定位的父元素,则它相对于可显示视口(viewport)/窗口定位。所以如果你打开 Firebug,你会发现元素是 bottom:0 从 firebug 窗口的顶部。如果您滚动,它的值似乎不会被重新计算。

当您开始相对于窗口定位时,事情确实变得有趣,您应该知道其影响(您可能偶然发现了其中之一 :) 最好像@Rohit 建议的那样将它包装在父 div 中,或者使用像 @ 这样的 float 新人提到

关于html - 位置 :absolute in Firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11929033/

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