css - 位置 :fixed will trigger the display:block?

标签 css

我测试过,在 chrome 或 firefox 上运行时,除了 ie,
position:fixed 会触发 display:block 吗?
这是测试 html:http://sking7.github.com/fix.html
代码会提醒两次,第一次是显示,第二次是 document.compatMode
这是为什么?
w3c 已经这么说了?

最佳答案

好吧,我找到了w3 specifications for this :

9.7 Relationships between 'display', 'position', and 'float'

The three properties that affect box generation and layout — 'display', 'position', and 'float' — interact as follows:

  1. If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box.
  2. Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.
  3. Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below.
  4. Otherwise, if the element is the root element, 'display' is set according to the table below, except that it is undefined in CSS 2.1 whether a specified value of 'list-item' becomes a computed value of 'block' or 'list-item'.
  5. Otherwise, the remaining 'display' property values apply as specified.
Specified value                                     Computed value

inline-table                                        table

*inline*, table-row-group, table-column, 
table-column-group, table-header-group, 
table-footer-group, table-row, table-cell, 
table-caption, inline-block                         *block*

others                                              same as specified

关于css - 位置 :fixed will trigger the display:block?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12832391/

相关文章:

css - 100% 2 列高 CSS 问题!

javascript - HTML/CSS 不工作或 Javascript - 下拉菜单

CSS 背景大小填充父级

html - CSS 下拉菜单 + 旋转木马

css - 避免绝对定位的元素超出页面宽度的边界

javascript - 先前元素列表的 CSS 应用于 javascript 中的新元素列表

javascript - 制作了一个适用于 JSFiddle 但不适用于 Github Pages 的 eclipse 刻草图

javascript - owl carousel 2 在部分可见时开始自动播放

javascript - 将一个元素置于另一个元素之上,该元素具有响应性并根据屏幕尺寸进行缩放?

css - 如何在 materialize.css 中删除可折叠 div/li 的边框