position - 跨不同浏览器定位

Question

我遇到了一个问题，即页面上自身级别的元素在不同浏览器中的位置不同。这是幻灯片； http://nevillebeandesign.com/Tattoo/bobShaw.html 在 Safari 中，它比 Firefox 和 Chrome 高几个像素，而在 Opera 中显着降低。我不得不减小它的大小，这样它就不会与背景图像中的红线重叠（最初在 Safari 中，它紧贴在两条红线之间）。我可以在文档头中放置某种修复程序来调整不同浏览器的定位吗？谢谢！

Answer 1

该问题与您正在使用的 <object> 元素有些相关，该元素被插入到单元格中。此外，由于您依赖于过时的标记结构（表格），因此许多旧的怪癖开始发挥作用。基本上，您的元素在 CSS 中称为内联块。这意味着它可以接受垂直对齐属性。但是，在您的情况下，您强制浏览器使用其内部算法，因为您使用了 align 属性（已弃用）。这就是为什么您会在各种浏览器中看到不同的垂直对齐方式。要解决此问题，请为对象的元素提供规定的高度，并尝试将“vertical-align: middle”CSS 声明应用于对象本身。您还可以尝试在对象的容器上设置适当的“行高”。