位置:绝对没有设置顶部/左侧/底部/右侧？

Question

情况1:

我想在默认WordPress主题(http://twentyelevendemo.wordpress.com/)的标题中在照片上方放置一个徽标

我的解决方案:在照片前添加徽标,并position: absolute在其上设置,而不设置任何top/left/bottom/right属性:

http://jsfiddle.net/TsAJp/

HTML:

<a id="header">
  <img id="logo"> 
  <img id="photo">
</a>

CSS:

#logo {
  position: absolute;
  margin: 10px;
  /* or padding: 10px; */
  /* or border: 10px solid transparent;
     only this works with my elderly iPhone Simulator.app */
}

案例#2:

另一个例子是一个100%宽的水平多级菜单display: table-*,但是table-cell不支持position: relative,所以我唯一的解决方案是:http://jsfiddle.net/pCe49/

它适用于IE6-7,Firefox1.5,不适用于Firefox 0.8等.

你认为这是一个很好的解决方案,还是一个非标准的黑客攻击,它可以在任何时候崩溃？

Answer 1

标准通常表示如果顶部/底部,左/右是自动,则将它们默认为它们的position: static值:

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height