Sealyu

          --- 博客已遷移至: http://www.sealyu.com/blog

            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
            618 隨筆 :: 87 文章 :: 225 評論 :: 0 Trackbacks

          在ie(經測試IE8已經不存在此問題)中如果td標簽中沒有內容時,存在不顯示邊框的問題,最簡單的辦法就是用javacript,在文檔加載完后加入下面的JS:

          var aTd=document.getElementsByTagName("td");
          for(i=0;i<aTd.length;i++) {
          if(aTd[i].innerHTML=="")aTd[i].innerHTML="&nbsp;";
          }

          當然還有別的辦法,在TD所屬的那個table用CSS也是可以的

          table{ border-collapse:collapse;}

          之前總結了下如何用 css 來實現 table 的 border + bordercolordark + bordercolorlight 的邊框明暗效果,然后有網友問我為什么他寫了一個類似的 css 樣式,但只能在 Opera 下正常看到表格的邊框效果, IE 下則什么也沒有。

          于是我跑去下了個 Opera9 一看,確實如此。原因倒也不復雜:因為在 IE 下( Firefox 似乎和 IE 一致)如果某個 td 的內容為空的話,即便你設置了高度和寬度,這個 cell 的邊框樣式也是不會被顯示出來的; Opera 則不管是否有內容與否,一概應用樣式來渲染。這個問題剛畢業那會就碰到了,當時部門的科長來問我,后來我跟他說:給每個空的 td 加上   就行了。以后每次碰到這個問題,我就統統采用這個簡單粗暴有效的方式來解決了。

            但今天卯足了勁研究了幾下,從 Jiarry 那知道原來 css 語法是允許我們對這些缺省行為進行改變的:使用 border-collapse:collapse;empty-cells:show; 就可以讓消失的邊框顯現出來。

          class="test1": 加 border-collapse:collapse;

          .test1{
          border:1px solid #999999;
          border-collapse:collapse;
          width:60%
          }
          .test1 td{
          border-bottom:1px solid #999999;
          height:28px;
          padding-left:6px;
          }

          class1  這兒有內容


          這兒有內容


           

          class="test2": 加 border-collapse:collapse; 和 empty-cells:show;

          .test2{
          border:1px solid black;
          border-collapse:collapse;
          width:60%
          }
          .test2 td{
          border-bottom:1px solid black;
          height:28px;
          padding-left:6px;
          empty-cells:show;
          }

          class2  這兒有內容


          這兒有內容


           

          class="test3": 不加 border-collapse:collapse; 和 empty-cells:show; 的情況下

          .test3{
          border:1px solid #999999;
          width:60%
          }
          .test3 td{
          border-bottom:1px solid #999999;
          height:28px;
          padding-left:6px;
          }

          class3  這兒有內容


          這兒有內容


           

          posted on 2009-12-26 09:35 seal 閱讀(3196) 評論(1)  編輯  收藏 所屬分類: webCSS

          評論

          # re: IE中td內容為空時不顯示邊框的解決辦法(轉) 2010-06-21 15:32 e
          <style>  回復  更多評論
            

          主站蜘蛛池模板: 察隅县| 两当县| 尖扎县| 玉山县| 英吉沙县| 任丘市| 永德县| 小金县| 林西县| 北辰区| 卢氏县| 辛集市| 钟山县| 通渭县| 邯郸县| 新巴尔虎左旗| 当阳市| 麻栗坡县| 同德县| 建宁县| 南宁市| 永兴县| 乐陵市| 南靖县| 涞源县| 个旧市| 饶平县| 霞浦县| 沈阳市| 扎囊县| 友谊县| 台湾省| 上蔡县| 油尖旺区| 遂溪县| 定南县| 西充县| 河北区| 凤城市| 五原县| 三门峡市|