★→ASP程序學習群:62655404 微信公眾號開發

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

 2015/5/23 16:03:31  字體:  瀏覽 4133 我要評論
當前標簽
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 )非??岬膉avascript實現萬年歷功能
( 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 字,需審核,請自覺遵守互聯網相關政策法規。
驗證碼: 驗證碼 
深山工作室網友評論聲明,請自覺遵守互聯網相關政策法規。

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

更多信息>>欄目類別選擇
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編碼轉為漢字
更多>>隨機抽取信息
絕對超酷的JS顏色板
黑色的非??岬募虻avaScript日歷及說明
另外一種符合web2.0的鏈接打開方式--利用base打開鏈接
網頁小鍵盤/軟鍵盤
ASP漢字轉拼音,支持自定義特殊詞語
ul,li設置新聞列表,超出范圍對象,自動隱藏
收集各種游覽器禁止javascript的方法