在浏览器中呈现相对定位元素的差异

时间:2011-12-12 23:32:33

标签: html cross-browser

我最近为一家本地旅游公司制作了一个新的WordPress主题,他们现在得到的报告显示,我的设计中的两个元素在Firefox(特别是版本3.6)和Chrome for Mac中的位置不正确。

可见两个问题的页面:http://www.totemtravel.com/blog

的问题:

  1. 每页顶部带有徽标的白旗跳跃 向右几英寸覆盖第一个区域代码 电话号码。
  2. 侧边栏中博客类别窗口小部件底部的搜索按钮跳转到窗口小部件的右侧,并跳出页面内容包装器。
  3. 我认为这个问题与那些浏览器在相对定位之前应该假设该项目的位置有关,但是我需要一种方法来使这些浏览器在所有现代浏览器中看起来都一样。

    我不会将源代码页面粘贴在主题背后,因为可以使用Firebug或Chrome检查器轻松查看,但如果有任何其他信息有帮助,请告诉我。

1 个答案:

答案 0 :(得分:0)

1:白旗的img必须离开:0。并非所有浏览器都默认为左0.例如,Firefox默认为左:50%。另一个问题是你试图相对为标题“Totem Travel”定位一个td元素,这是无效的,我建议在这里使用div而不是表格。

2:这是由于浏览器的原生CSS样式差异造成的。这就是为什么人们使用CSS重置样式表,将所有内容归零,以便您确定“默认”css是相同的。这是一个例子:http://meyerweb.com/eric/tools/css/reset/。现在对你的css产生的影响是,提交按钮正在下降到输入下面,因为它没有足够的空间 - 所以当你相对定位它时,它在浏览器中关闭。

3:相对/绝对定位一切并不是最好的网站样式。你会发现许多不一致的事情,比如你正在经历的,还有更好的方法。我建议访问themeforest.com或elegantthemes.com等网站上的一些示例主题,看看他们如何使用CSS和HTML