【问题标题】:What is the biggest cons to use position: absolute & top/left over Float & margin+padding, If site is fixed width (970px), centered?使用位置的最大缺点是什么:绝对和顶部/左侧浮动和边距+填充,如果网站是固定宽度(970px),居中?
【发布时间】:2023-12-25 03:28:01
【问题描述】:

使用 CSS 定位 (From Dreamweaver AP Div) 代替 Float 用于固定宽度、居中的网站的最大缺点是什么?

如果我不在乎

  • 移动用户
  • 小屏用户(小于1024 px 屏幕大小)

但我关心

  • 屏幕阅读器用户
  • 所有浏览器用户(包括IE6)

【问题讨论】:

  • 你的意思是使用position: absolute & top/left定位?
  • @ K Prime - 我们使用 Float 进行布局以通过浮动和边距填充等定位任何元素的任何地方
  • @K Prime - 是的,使用位置:绝对

标签: css xhtml accessibility screen-readers


【解决方案1】:

如果您不在乎小分辨率,那只是灵活性问题:当您使用绝对定位时,您会打破流程。所以,一切都必须是精确的尺寸。

对于许多元素或情况(制作完美的图片标题...),这是最好的(有时是独特的)选择。大多数时候,'relative' 更好,因为它保持了流(元素留在流中),但是你可以修改相对于被定位的父级的定位(不要忘记定位父级,即使你没有给出明确的位置;例如,只需添加位置:相对,没有顶部/左侧...)。而且,很好,“位置:相对”为 IE 中的元素提供了 haslayout !

例如,如果您想在内容之后放置页脚,绝对不是一个好主意,因为您可能不知道内容的高度。 但是如果你想在屏幕顶部放置一个菜单但又不想打扰使用屏幕阅读器的人(大菜单应该在最后,在线性化文档上),绝对定位是完美。

Float 并不是完美的解决方案,正如您在许多博客上看到的那样:它是一种非常特殊的定位,但它很有用,因为“inline-block”并不总是有效。当然,当你真的想让元素浮动时,它也很有用。

当你的英语说得不好时,就不容易解释了:)

【讨论】:

    【解决方案2】:

    不是其中之一/或两者兼而有之...浮动适用于某些情况和位置:对于其他情况是绝对的,因此您可能需要在设计中同时使用两者。如果你对使用 CSS 很认真,我建议你购买并阅读本书http://www.transcendingcss.com/

    【讨论】:

      【解决方案3】:

      如果一个元素包含文本,你无法预测它的高度(因为你不知道它实际呈现的字体和字体大小)。

      这使得将一个元素的顶部放置在另一个元素的底部是不可能的。例如:忘记传统的“带有页眉和页脚的两列”布局。

      【讨论】:

      • 看了这篇文章后问了这个问题adobepress.com/articles/article.asp?p=770996
      • 多么棒的文章。简而言之:“绝对定位是垃圾,但有了它你可以假装 Dreamweaver 是 Photoshop!你喜欢 Photoscript,所以这里是如何破坏绝对定位的用户体验。”
      最近更新 更多