我与某人讨论了绝对定位。他声称最好的做法是确保在大多数浏览器中一切看起来都一样,并且这是保持网站外观和感觉的最简单方法。
我不同意他的观点,绝对定位将是补救措施,也是布局网页的整体最佳方法。
就我而言,我更热衷于使用边距/宽度/仔细浮动调整的方法,有时还使用偶尔的表格。这是一个轻微的概括,当然,我不会仅仅因为我在意识形态上反对它而停止使用绝对定位,只是我发现方法绝对定位,一条规则适合所有方法,正如我的同行所倡导的那样比较怀疑。
对此的普遍共识是什么?
我与某人讨论了绝对定位。他声称最好的做法是确保在大多数浏览器中一切看起来都一样,并且这是保持网站外观和感觉的最简单方法。
我不同意他的观点,绝对定位将是补救措施,也是布局网页的整体最佳方法。
就我而言,我更热衷于使用边距/宽度/仔细浮动调整的方法,有时还使用偶尔的表格。这是一个轻微的概括,当然,我不会仅仅因为我在意识形态上反对它而停止使用绝对定位,只是我发现方法绝对定位,一条规则适合所有方法,正如我的同行所倡导的那样比较怀疑。
对此的普遍共识是什么?
互联网不是印刷品,我认为绝对定位所有内容并不理想。我认为您可以通过使用您的方法确保事情看起来更好,也许可以通过在某些宽度上使用 EM 来增强页面,以使页面在不同的屏幕尺寸(和 DPI)上更加流畅。这使您的内容可以更好地扩展,并且随着移动浏览变得越来越流行,这一点很重要。
根据我的经验,当您计划页面必须适应不同的设备时,页面总体上看起来会更好,而不是像您在打印中看到的那样尝试强制 100% 像素完美的布局。这不是互联网的本质。
编辑:多想一下,如果你不小心的话,使用所有绝对的东西可能真的会用移动浏览器咬你。当您的网站在 iPhone 之类的设备上使用绝对定位时会发生什么(假设您将某些元素与角落对齐)?定位将与 iPhone 的角对齐,这是一个奇数比(与计算机相比)和小得多的分辨率;把一切都搞砸了。如果您使用浮动/宽度/等的组合,您将确保网站保持其原始大小并且您只需要滚动。
我的一般观点是目的证明手段是正当的。
实用主义在这里至高无上。最终目标是让它尽可能快地在最广泛的浏览器上运行。是否使用绝对定位,是否使用表格,是否使用纯CSS……所有这些问题,充其量都是次要的。
实际上,我发现那里有多少“表仇恨”很奇怪,但是,正如无数次记录的那样,如果您想做一些事情(例如垂直居中)并使其与 IE6 兼容,那么没有更快、更容易和更多的方法了兼容的解决方案。
我不赞成或反对表格、绝对定位或任何东西。我唯一“支持”的是它有效。
因此,在这种情况下,我发现关于“激进”绝对定位的论点——由于缺乏更好的描述——无关紧要的干扰。
在大多数情况下,使用所有这些东西(表格、绝对定位、纯 CSS 等)您并没有解决所有问题,您只是在用一组问题换另一组问题。这可能没问题,因为在你正在做的事情的背景下,一组问题可能更可取,但没有灵丹妙药(无论是绝对定位还是其他任何东西)。
根据经验,我在获得绝对定位以做我想做的事情(跨浏览器)时遇到的问题与任何其他方法一样多。
绝对定位通常很糟糕。您很少希望您的网站在某人的 1024x768 笔记本电脑上与他们的 1920x1200 台式机上的全屏显示相同。另外,祝你好运,用不同的用户字体大小来协调你的绝对定位。
提醒您的同行,用户更愿意看到他们想要的网站外观,而不是他想要的外观和感觉(在合理范围内)。
保证所有浏览器的一切看起来都一样是一个困难的目标,主要是因为你总是瞄准一个移动的目标。
网站是本质上主要是文本的内容的交付机制。如果您的内容依赖于像素完美的定位,例如动画图形等,那么 HTML 和 Javascript 可能不是您的最佳解决方案。如果您的段落在 Firefox 中的页面上比在 IE 中低一个像素,这真的很重要吗?
虽然它可能非常主观,但我不喜欢绝对定位,因为您应该检查禁用 CSS 以查看非 CSS 感知浏览器的内容如何降级(例如搜索引擎、基于控制台的文本浏览器和 HTML- >盲人语音浏览器)。
不绝对定位的另一个主要优点是,您可以拥有更通用的 CSS,在整个网站上共享,而不必在代码中乱扔定位语句——如果客户突然让他们的徽标具有不同的效果,那就太可怕了纵横比,需要移动一切......
使用绝对定位总是会在以后咬你。站点应尽可能处于正常流动状态,以便元素可以相互关联(增长/缩小,隐藏时折叠等)。
使用绝对定位的布局,每当内容发生变化时,您总是需要调整布局。
我只是出于三个原因真正使用绝对定位:
1)我将一个元素放在其他元素之上,比如一个弹出框。
2) 确实没有什么好的方法可以将元素放置在正常流程中需要的位置
4)元素将被动态操作(javascript),这需要在正常流程之外发生。
在使用绝对定位时,我倾向于遵守的另一条规则是使用另一个元素作为相对定位的父元素。这样,绝对定位的元素将相对于该父元素,而不是视口(视口通常会根据页面的查看方式改变其尺寸)。
他声称确保在大多数浏览器中一切看起来都一样的最佳实践
您无法确保在大多数浏览器中一切看起来都一样。根据平台、设置和可用性,字体总是以不同的方式呈现。如果您使用完全绝对定位(例如,每个元素的水平和垂直位置以像素为单位),那么字体大小的任何偏差都可能导致文本行相互重叠,从而使页面不可读.
有 WYSIWYG 设计工具可以做到这一点(有些人会以这种方式滥用 Dreamweaver),但它通常被认为是一种非常糟糕的方法。更常见的是,绝对定位仅用于水平轴,以制作固定宽度的页眉和页脚,同时允许页面中的文本根据需要占用尽可能多的垂直空间。(这就是 SO 所做的,例如,在许多其他方面。)
关于浏览器宽度的固定与液体布局争论是一场将永远肆虐的宗教战争,但显然正确的总结是液体是最好的。;-)
(......如果更难完成,抓住。)
这是保持网站外观和感觉的最简单方法。
是的!解决问题的坏方法通常是最简单的。但是“最佳实践”?几乎不。
仅当您 100% 确定所涉及的元素永远不必缩放其大小并且不会四处移动时,才使用绝对定位。如果您绝对定位了某个元素,然后另一个元素增长,它们可能会重叠并且您的布局被破坏。我会非常小心地使用绝对定位,并且通常建议反对它。几乎总是可以通过使用浮动元素和/或相对定位来实现相同的布局。
仅当您 100% 确定所涉及的元素永远不必缩放其大小并且不会四处移动时,才使用绝对定位。如果您绝对定位了某个元素,然后另一个元素增长,它们可能会重叠并且您的布局被破坏。
这是正确的。我刚为某个人修了一个网站赚了 500 美元,并教他他的绝对定位网站在他添加逗号的那一刻就坏了,因为文本会重新流动,整个事情就会崩溃。
cletus有一点。作为开发人员,最终的问题是——我们想要做到多彻底?如果让您的网站快速发布是最重要的,那么可能会牺牲额外的预防措施。如果使网站“防弹”是一个优先事项,那么这样做将花费大量时间和精力。我个人绝不会以方便的名义牺牲可扩展性和/或可用性。在我的书中,每次缩放都使布局的绝对定位不合格。
我完全不喜欢绝对定位,但我看到 Web 开发人员使用它来获得更好的搜索结果,因为他们可以轻松地将最重要的文本部分放在 HTML 的开头,并使用绝对定位将其定位到它的位置实际上属于。
即使是那个论点,我也不会使用它,因为有一些方法可以让 HTML 对搜索引擎友好,但仍然使用流畅的布局,例如The Perfect 3 Column Liquid Layout或其他变体。