我遇到了浏览器之间的一些定位不一致问题。我正在尝试定位一个提交按钮,使其悬停在textarea的下角。
在Chrome,Safari和其他浏览器中,它的工作原理应该如下:
然而,在Firefox中,我得到了这个:
是否有不同的方法来定位该元素,或者我是否遗漏了我的CSS?
以下是HTMl和CSS的链接:http://www.tylonius.com/clients/X10/GalleryDisplay.html
答案 0 :(得分:1)
绝对提交按钮的位置。
position: absolute;
bottom: 0;
right: 0;
确保其父元素的位置设置为relative
。
答案 1 :(得分:0)
我最近一直在处理很多这样的问题,我要做的第一件事就是检查填充,边距和边框。我敢打赌Firefox设置的默认属性与其他浏览器不同,你需要覆盖它。检查器中的“计算样式”选项卡应足以确定是否属于这种情况。
答案 2 :(得分:0)
我只是将该屏幕截图放入photoshop并测量了包含元素的底部填充。在顶部图片中,它是11px
高。在底部图片中,它是13px
。我猜这是你的问题,但没有看到你的代码,就不可能肯定地说。尝试查看周围元素的CSS。我不认为<input>
元素是你的问题。
修改强>
现在我可以看到你的代码我确定这个答案是正确的。问题是周围盒子的长度。您需要做的是从#gallery-commentform
获取样式并将其应用于包含该表单的div。然后将textarea
和submit
相对于左下角绝对定位。这样,无论浏览器如何呈现高度/填充/ yaddayadda,它始终与表单底部的距离相同。