绝对将所有内容都放在网站上?

时间:2009-03-17 13:01:57

标签: html css web-standards css-position

我与某人就绝对定位进行了讨论。他声称确保大多数浏览器的所有内容看起来都是一致的最佳做法,并且这是保持您想要用于网站的外观和感觉的最简单方法。

我不同意他的意见,绝对定位将是补救措施,也是制定网页的最佳方法。

在我的情况下,我更热衷于使用保证金/宽度/小心浮动调整的方法,有时甚至是偶尔的表格。这是一个轻微的概括,当然,我不会停止使用绝对定位只是因为我在意识形态上反对它,只是我发现方法绝对位置一个规则适合所有方法,由我的同行提倡相当可疑。

对此有何普遍共识?

11 个答案:

答案 0 :(得分:18)

互联网不是印刷品,我不认为绝对定位所有东西是理想的。我认为你可以通过使用你的方法确保事情看起来更好,也许通过使用EMs增加一些宽度来增加页面在不同的屏幕尺寸(和DPI)上更流畅。这样可以让您的内容更好地扩展,并且移动浏览变得越来越受欢迎,这很重要。

根据我的经验,当你计划让你的页面不得不适应不同的设备时,页面整体看起来会更好看,而不是试图强制像你在印刷中看到的100%像素完美的布局。这不是互联网的本质。

编辑:如果你不小心的话,多考虑一下,使用所有绝对值可能真的会回来用手机浏览器咬你。当你的网站在像iPhone这样的东西上使用绝对定位时会发生什么(假设你正在将一些元素对齐到角落)?定位将与iPhone的角落对齐,这是一个奇数比(与计算机相比)和更小的分辨率;把一切都扔掉了。如果您使用浮动/宽度/等的组合,您将确保该网站保持其原始大小,您只需滚动。

答案 1 :(得分:14)

我的一般观点是证明手段的合理性。

实用主义在这里占据了至高无上的地位。最终目标是尽可能快地在最广泛的浏览器上使用它。是否使用绝对定位,是否使用表格,是否使用纯CSS ......所有这些问题充其量只是次要的。

我实际上发现奇怪的是,那里有多少“表仇恨”,但是,无数次记载,如果你想做一些事情(比如垂直居中)并让它与IE6兼容,那就没有更快了,更简单,更兼容的解决方案。

我不赞成或反对桌子,绝对定位或任何东西。我唯一能做的就是它有效。

因此,在这种情况下,我发现有关“激进”绝对定位的争论 - 由于缺乏更好的描述 - 无关紧要的分心。

对于所有这些事情(表格,绝对定位,纯CSS等),在大多数情况下,你并没有解决所有问题,你只是将一组问题交给另一组。这可能没问题,因为在您正在做的事情中,一组问题可能更可取,但没有灵丹妙药(无论是绝对定位还是其他任何事情)。

从经验来看,我遇到了与其他方法一样的绝对定位问题(跨浏览器)。

答案 2 :(得分:8)

绝对定位通常很糟糕。您很少希望您的网站看起来与某人的1024x768笔记本电脑相同,并且在其1920x1200桌面上全屏显示。此外,祝您好运,将您的绝对定位与不同的用户字体大小相协调。

提醒您的同行,用户宁愿看到他们打算为网站打造的外观,而不是想要的外观(在合理范围内)。

答案 3 :(得分:6)

保证所有浏览器的所有内容都一致,这是一个难以实现的目标,主要是因为您总是瞄准移动目标。

网站是内容的传递机制,主要是文本性质。如果您的内容依赖于像素完美定位,例如动画图形等,HTML和Javascript可能不是最适合您的解决方案。如果您的段落在Firefox中的页面上比在IE中低一个像素,那真的很重要吗?

答案 4 :(得分:4)

虽然它可能非常主观,但我不是绝对定位的粉丝,因为你应该通过CSS禁用来查看内容如何降低非CSS感知浏览器(例如搜索引擎,基于控制台的文本浏览器和HTML->盲人语音浏览器。

绝对定位的另一个主要优点是,你可以拥有更多的通用CSS,在整个网站上共享,而不必在整个代码中丢弃定位语句 - 如果客户突然制作他们的徽标,那就太可怕了有不同的宽高比,需要移动一切...

答案 5 :(得分:3)

  

他声称确保大多数浏览器的所有内容都看起来都是一致的最佳做法

无法确保大多数浏览器的所有内容都看起来都一样。根据平台,设置和可用性,字体的呈现方式总是不同。如果你使用全开绝对定位 - 例如,每个元素的水平垂直位置设置为像素 - 那么任何字体大小的偏差都会导致文本行被写在上面彼此,使页面不可读。

有WYSIWYG设计工具可以做到这一点(有些人滥用Dreamweaver),但它通常被认为是一种有趣的糟糕方法。更常见的是,绝对定位仅用于水平轴,以制作固定宽度的页眉和页脚,同时允许页面中的文本占据所需的垂直空间。 (例如,这就是SO所做的事情。)

关于浏览器宽度的固定与液体布局论证是一场将永远愤怒的宗教战争,但明显正确的总结是液体是最好的。 ; - )

(...如果更难拉,natch。)

  

这是保持您想要网站的外观和感觉的最简单方法。

是的!解决问题的一个坏方法通常是最简单的方法。但“最佳实践”?几乎不

答案 6 :(得分:3)

使用绝对定位以后总会咬你。一个站点应该尽可能地处于正常流动状态,这样元素就可以相互关联(生长/收缩,隐藏时崩溃等)。

使用绝对定位的布局,无论何时内容发生变化,您都需要调整布局。

我只使用绝对定位有三个原因:

1)我将一个元素放在其他元素的顶部,就像一个弹出框。

2)确实没有好的方法可以将元素置于需要正常流量的位置

4)元素将被动态操作(javascript),这需要在正常流程之外发生。

使用绝对定位时,我倾向于遵守的另一条规则是使用另一个元素作为相对定位的父元素。这样,绝对定位的元素将相对于父节点而不是视口(它通常会根据页面的查看方式改变其大小)。

答案 7 :(得分:2)

仅当您100%确定所涉及的元素永远不必缩放其大小且不会移动时,才使用绝对定位。如果你已经绝对定位了一些元素,然后另一个元素增长,它们可以重叠并且你的布局被破坏了。我会非常小心地使用绝对定位,并且通常建议不要这样做。通过使用浮动元素和/或相对定位,几乎总能实现相同的布局。

答案 8 :(得分:2)

cletus 有一点意义。作为开发人员,最终的问题是 - 我们希望有多彻底?如果快速启动您的网站是最重要的,那么可能会牺牲额外的预防措施。如果建立一个网站“防弹”是一个优先事项,那么这样做将需要花费大量的时间和精力。我个人永远不会以便利的名义牺牲可扩展性和可用性。在我的书中,每次在其他事物中缩放都不符合布局的绝对定位。

答案 9 :(得分:2)

  

仅在您使用绝对定位时   是100%肯定的参与   元素永远不会扩展   他们的大小,不会被移动。   如果你绝对定位了一些   元素,然后另一个成长   他们可以重叠,你的布局是   碎。

这是对的。我只是花了500美元为某个人修理一个网站,并告诉他,他的绝对定位的网站打破了他加入逗号的那一刻,因为文本会重新流动,整个事情就崩溃了。

答案 10 :(得分:0)

我不是绝对定位的粉丝,但我看到网络开发人员使用它来获得更好的搜索结果,因为他们可以轻松地将最重要的文本部分放在HTML的开头,并使用绝对定位来定位它实际上属于哪里。

我甚至不会将它用于那个论点,因为有一些方法可以让HTML成为搜索引擎友好的但仍然使用流畅的布局,例如The Perfect 3 Column Liquid Layout或其他变体。