display: inline-table;在火狐、Opera上显示不正常，在IE、Chrome中显示正常

最近遇到的一个问题，display: inline-table在火狐、Opera中显示效果错乱，变成了table-row的效果。

想要效果：

实际效果：

解决方案

把display的属性赋为空 display : ‘’ 即可解决

display=""; 就是采用默认值

语法：

取值：

属性值	描述
block	css1 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行，可以代替普通的visible中的true；
none	css1 隐藏对象，与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间；
inline	css1 内联对象的默认值，将对象强制作为内联对象呈递，从对象中删除行；
inline-block	IE5.5 将对象呈递为内联对象，但是对象的内容作为块对象呈递，旁边的内联对象会被呈递在同一行内。；
compact	css2 未支持，分配对象未块对象或给予内容之上的内联对象；
marker	css2 未支持。指定内容在容器对象之前或之后，要使用此参数，对象必须和：after及：before伪元素一起使用；
inline-table	css2 未支持，将表格显示为无前后换行的内联对象或内联容器；
list-item	css2 将块对象指定为列表项目，并可以添加可选项目标志；
run-in	css2 未支持，分配对象为块对象或基于内容之上的内联对象；
table	css2 未支持，将对象作为块元素级的表格显示；
table-caption	css2未支持，将对象作为表格标题显示；
table-cell	css2 未支持，将对象作为表格单元显示；
table-column	css2 未支持，将对象作为表格列显示；
table-column-group	css2未支持，将对象作为表格列组显示；
table-header-group	css2 将对象作为表格标题组显示；
table-footer-group	css2将对象作为表格脚注组显示；
table-row	css2未支持，将对象作为表格行显示；
table-row-group	css2 未支持，将对象作为表格行组显示说明：设置或检索对象是否及如何显示；

对于下列元素来说，此属性的默认值为 block：
ADDRESS QUOTE BODY XMP CENTER COL COLGROUP DD DIR DIV DL DT FIELDSET FORM HN HR IFRAME LEGEND LISTING MARQUEE MENU OL P PLAINTEXT PRE TABLE TD TH TR UL

对于下列元素来说，此属性的默认值为 none：BR FRAME nextID TBODY TFOOT THEAD

对于下面元素来说，此属性的默认值为 list-item：LI

其他元素的默认值都是 inline。

在ie6.0以前的版本中，LI对象的默认值为block.在ie4.0中，block，inline，list-item值不被支持，但是对象仍然会被呈递。

在IE 5.0 中开始支持block和inline。

在IE5.5中开始支持inline-block。你可以使用inline-block使对象获得布局而无需指定确切的高（height）和宽（width）。

在IE6.0中开始支持list-item。所有可视的文档对象都是块对象(block element)或者内联对象(inline element)。

例如， div 是一个块对象。 span 是一个内联对象。块对象的特征是从新的一行开始且能包含其他块对象和内联对象。内联对象被呈递时不会从新行开始，能够包含其他内联对象和数据。
改变此属性值对其周围内容布局的影响可能是：

在属性值设为 block 的对象后面添加新行。

从属性值设为 inline 的对象中删除一行。

隐藏属性值设为 none 的对象并释放其在文档中的物理空间。

table-header-group 和 table-footer-group 属性值可用来指定当表格( table )跨越了多页时， tHead 和 tFoot 对象的内容在每一页都显示。

此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为display。

display: inline-table;在火狐、Opera上显示不正常，在IE、Chrome中显示正常

猜你喜欢