请注意,我并不是要解决任何特定问题,而是要了解是什么导致了此问题。
我已经设置了一些div的width
,height
和display
,但是高度/宽度设置不被接受。文本也被向下推。
http://jsfiddle.net/k7esv/
1)为什么在表行中设置height
时将文本向下推,而在删除height
时却将文本推到顶部,为什么向下推?
2)为什么不接受宽度/高度设置?
3)为什么设置margin
属性也不会对其产生任何影响?
http://jsfiddle.net/k7esv/1/
最佳答案
1)这似乎是Firefox特有的渲染问题。在div上设置vertical-align
属性即可对其进行修复。 top
,middle
或bottom
似乎都可以工作。当我设置了height
但未设置vertical-align
时,我不了解FF在做什么。这可能是一个错误。
2)宽度和高度是受尊重的,但是它们受表大小规则的约束。当表没有足够的空间来为每个单元格指定其宽度时,它将为具有更多内容的单元格提供更多空间。这就是您的示例所发生的情况。如果您在下面的示例中看到,当父元素的宽度大于表单元格宽度的总和时,单元格将尊重该宽度。高度应始终有效(上面提到的FF渲染问题除外)。
3)表格单元格没有边距。在父div上使用border-spacing和display:table。
http://jsfiddle.net/chad/k7esv/3/