当前位置：文江博客话题详情

CSS绝对定位噩梦ߞ浏览器差异

发布于 2024-12-25 15:31:03 字数 422 浏览 0 评论 0原文

我有一些代码可以让我弹出几个 div ，其中包含 HTML。

我在 Firefox 中得到了完美的像素，然后意识到所有其他浏览器（未在 IE 中测试）都已关闭。

谁能告诉我或给我看一篇关于不同浏览器如何处理绝对定位元素以及如何纠正我的困境的文章？

这是我的原始代码，这是我的新代码。

这就是我所看到的：

差异照片

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忆悲凉 2025-01-01 15:31:03

在所有浏览器中，绝对定位的定义方式都是相同的。

元素绝对定位到相对/绝对定位的父元素或主体元素（如果不是这样）。

回复收藏 0 原文

淡淡離愁欲言轉身 2025-01-01 15:31:03

我在 IE9、Chrome 17 和 FF9 中看起来不错。添加相对于 div#userControls 的位置将确保您相对于其父节点定位绝对节点。

回复收藏 0 原文

恋竹姑娘 2025-01-01 15:31:03

我已经弄清楚我做错了什么。我在 p 标签周围创建了一个 div ，然后将宽度设置为我想要的，因为之前它是通过在 p 周围使用填充来计算空间的这是我更新后的代码，运行完美！（我希望）

更新代码：DEMO

编辑：
我在每个可见框之外都有隐藏框（您单击以显示隐藏框），因此当我尝试放置它们时，很难确定它们将位于何处DOM，但如果您将隐藏框分别设置为可见框的子元素，那么您可以使用position：relative; CSS属性来精确定位子框< /em> 你想要它们的地方！

CSS

.visibleBox{
     position: relative;
}

.hiddenBox{
     position: absolute;
     bottom: 0; 
     right:0;
}

HTML

<div class="visibleBox">
    <p class="hiddenBox">I am hidden sometimes<p>
</div>

所以我想说的是，我在 DIV 之外有 P ，这是使得在所有浏览器中正确定位它变得非常尴尬，但是使用父级和子级的相对和绝对位置它解决了我的问题。

I have worked out what I was doing wrong. I created a div around the p tag and then set the width to what I wanted because before it calculated the space by using padding around the p here is my updated code that works perfectly! (I hope)

Updated code: DEMO

Edit:
I had the hidden boxes outside each of the visible boxes (where you click to show the hidden ones) so it when I was trying to position them it was not easy to determine where they were going to be in the DOM but if you make the hidden boxes a child of the visible boxes respectively then you can use position: relative; CSS property to position the child boxes exactly where you want them!

CSS

.visibleBox{
     position: relative;
}

.hiddenBox{
     position: absolute;
     bottom: 0; 
     right:0;
}

HTML

<div class="visibleBox">
    <p class="hiddenBox">I am hidden sometimes<p>
</div>

So what I am trying to say is that I have the P outside of the DIV and this was making it totally awkward to position it correctly in all browsers but using the parent and child with the relative and absolute position it fixed my issue.

回复收藏 0 原文

~没有更多了~