按照常理,对于某一单元行需要显示时,使用:display:block属性,不需要显示时使用display:none属性,而且这样做在IE浏览器中显示正常,没有任何问题。
但是当用Firefox浏览时却出现了布局错乱的问题,然后通FireBug去看了下源码,调试下了,发现是display:block属性搞的鬼。
1、当表格为多列的情况下,属性为"display:block"行的内容宽度仅与第一列宽度相同,也就是说无论你使colspan的属性值为多少,剩余列的空间都不进行解析。
2、同一行反复的在"display:none;"与"display:block;"两个状态间切换时,表格的底部会持续的产生多余的空白空间以至于造成页面布局的扭曲。
解决方法:
1、用display:table-row属性来调试,发现者FireFox下正常了,但IE是不支持改属性的,怎么办呢?用JS来做判断,然后做兼容吧。
2、另外一个很简单也很可行的方法,就是用 display:' ' 这个属性dispaly后面不加任何的东西,很奇怪,这样就兼容了Firefox和IE了。
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/lhypang2006/archive/2009/12/07/4958042.aspx
分享到:
相关推荐
table中tr的display:block显示布局错乱问题
- **使用`display: table-row`**:在Firefox等支持CSS `display: table-row`属性的浏览器中,可以有效地解决上述问题,因为它能保持表格的原有布局。但是,Internet Explorer(尤其是较旧版本)并不支持这一属性。...
在CSS布局中,`display`属性是一个至关重要的样式规则,用于定义元素的显示方式。`display:inline-block`是其中一种特殊的值,它结合了`inline`和`block`两种显示特性的优点,使得元素既能像内联元素一样并排显示,...
"利用层的table-row、table-cell属性进行页面布局"是一种常见的CSS布局技术,尤其在早期的Web开发中广泛使用,尽管现代CSS布局如Flexbox和Grid已变得更为流行。这种布局方法模仿了HTML表格的行(row)和单元格(cell)...
例如,在IE6和IE7中,可能会出现布局错乱的问题。 为了解决这些问题,可以采用以下几种方案: - **使用Polyfill**:对于不支持`display:inline-block`的浏览器,可以使用Polyfill来提供兼容性支持。 - **使用`...
5. `display:compact`、`display:marker`、`display:run-in`、`display:table`等值在某些浏览器中可能不受支持,但在特定场景下有特定用途,比如`run-in`尝试将块元素插入到内联流中,`table`则用于创建表格布局。...
`display: table-cell` 是一个在 CSS 中实现此类布局的有效方法,它利用了表格单元格(table-cell)的特性来实现列的自适应。这种方法在处理不同屏幕尺寸和设备时能够保持内容的对齐和比例。 在标题和描述中提到的...
项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格的合并,即采用正行嵌套一个单独的...
在display:table标签中,默认情况下,空记录时不显示表头信息。如果想要显示表头信息,可以使用以下代码: `<display:setProperty name="basic.msg.empty_list_row" value="" />` `<display:setProperty name=...
目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cell属性在实际项目中的应用。 我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐...
解决`resize`事件在Firefox中无效的问题,有以下几种策略: 1. **延迟绑定**:由于Firefox可能在页面完全渲染之前没有准备好`resize`事件,我们可以使用`setTimeout`函数延迟绑定事件监听器,确保在DOM完全加载后...
`display`属性在`Style`中扮演着至关重要的角色,它允许开发者根据需求调整元素的显示状态,从而实现各种复杂的网页布局。在【标题】"网的效果Style中的Display用法.pdf"中,我们主要讨论的是`display`属性在CSS中的...
在本例中,我们关注的是`display`属性的两个值:`block`和`none`。 - `block`:使元素作为块级元素显示,它将占据整个父元素的宽度,并在其前后形成新的行。 - `none`:使元素完全不显示,也不占用页面上的空间。 #...
在实施解决方案时,还需注意一些细节问题,例如确保CSS中table-layout属性设置为fixed,并且表格宽度也被适当地指定,以便于固定布局的生效。同时,当使用col标签指定宽度时,也需要在相应的col标签中明确指定width...
在这个详解中,我们将深入讨论`display`属性中的`inline`、`block`以及`inline-block`值,以及它们在实际布局中的应用。 1. **`display: inline`** `inline`值使得元素作为行内元素显示,这意味着元素会与其他...
ie7和ie6都不能识别 display: table-cell;(但是支持display: block等css1的属性!) ie8以及以后版本可以识别! ie7和ie6能识别vertical-align:middle; 如果盒模型中间只有几段文字的话,设置line-height就可以...
本篇文章将详细讲解如何在不预先知道table ID的情况下,使用jQuery来隐藏table中的tr或td元素,以及涉及到的相关知识点。 首先,让我们了解HTML的table结构。一个基本的HTML表格由`<table>`标签开始,内部包含`<tr>...