4s天天飞车刷金币|天天飞车突击尖兵觉醒
★→ASP程序學習群:62655404 微信公眾號開發
訂閱本欄目 RSS您所在的位置: 深山工作室 > DIV+CSS學習 > 正文

在table中tr的display:block在firefox下顯示布局錯亂問題

 2015/5/23 16:03:31  字體:  瀏覽 4137 我要評論
當前標簽
display
在table中tr的display:block在firefox下顯示布局錯亂問題


按照常理,對于某一單元行需要顯示時,使用: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了。
在table中tr的display:block在firefox下顯示布局錯亂問題 

按照常理,對于某一單元行需要顯示時,使用: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了。
相關閱讀
( 2012/11/20 18:14:15 )在未知圖片的寬度與高度時利用div+css將圖片居中
( 2011/1/27 9:09:51 )JS+CSS實現圖片放大預覽效果(購物時放在產品上面預覽圖片)
( 2011/1/14 17:03:42 )javascript取漢字拼音首字母縮寫程序
( 2010/7/6 10:43:51 )非常不錯的支持各種瀏覽器的簡易調色板
( 2010/7/4 16:55:59 )非常酷的javascript實現萬年歷功能
( 2010/7/2 13:05:11 )div+css黑色焦點圖(幻燈片效果非常 不錯)
( 2010/6/28 23:30:14 )特別簡潔的簡單JavaScript日歷及說明
( 2010/4/6 15:19:23 )這個超級強的div+css圖片大小自適應
共有0條關于《在table中tr的display:block在firefox下顯示布局錯亂問題》的評論
發表評論
正在加載評論……
返回頂部發表評論
呢 稱:
表 情:
內 容:
評論內容:不能超過 1000 字,需審核,請自覺遵守互聯網相關政策法規。
驗證碼: 驗證碼 
深山工作室網友評論聲明,請自覺遵守互聯網相關政策法規。

您發布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
二、不得發布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發布內容擁有處置權。

更多信息>>欄目類別選擇
rss學習
個人空間
網站設計
網站公告
下載
photoshop學習
ASP學習
DIV+CSS學習
SEO搜索引擎憂化
java學習
HTML學習
網站信息
網站類信息
更多>>同類信息
利用CSS實現半透明效果兼容IE與火狐與chrome等瀏覽器
在未知圖片的寬度與高度時利用div+css將圖片居中
用css做的英文首字母大寫和英文全都大寫通過各個瀏覽器
css優先級的例子
讓DIV固定在瀏覽器窗口的底部(兼容IE6)
MarkMan 馬克鰻,讓設計更有愛 (超級給力的頁面標注工具)
IE8 CSS HACK 兼容
IE6不支持png24的解決辦法(png24做為css的背景)
更多>>最新添加文章
sql server中前綴為PK、UK、DF、CK、FK表的意思
網站從http改成https(ssl證書)后設置301跳轉將http跳轉到https的方法
ASP利用fso讀取文件夾里所有文件的名字
jquery動態生成的html代碼中無法使用jquery事件的解決方法
asp實現獲得當前文章的上一篇信息與下一篇信息功能及代碼
asp導出內容到excel表并自定義命名后下載(非打開)
'禁止站外提交頁面和數據
asp將中文漢字字符轉為unicode編碼(\u編碼)與把unicode編碼轉為漢字
更多>>隨機抽取信息
利用javascript靜態改變表單指向與提交方式
DIV+CSS分頁代碼,放大鏡分頁效果
右擊把當前頁面添加到當地收藏夾
按鈕復制文章URL和復制保留文章的版權
設置自己個性的網頁滾動條附詳細介紹
CSS代碼格式化和壓縮化
當鼠標移到圖片上時會發生夢幻般輪流變化的圖片特效
asp之自動閉合UBB標簽函數
4s天天飞车刷金币