<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    我是FE,也是Fe

    前端來源于不斷的點滴積累。我一直在努力。

    統計

    留言簿(15)

    閱讀排行榜

    評論排行榜

    mark:webkit表格設置css table-layout:fixed的bug

    通常使用table-layout:fixed用在表格上來使表格能準確的設置寬度。常見的例子莫過于
        <style type="text/css">
            table
    {table-layout:fixed; border-collapse:collapse;border:1px solid #000; border-width:1px 0px 0px 1px;width:200px;}
             td
    {text-align:left;overflow:hidden;padding:0px;margin:0px;white-space:nowrap; border:1px solid #000; 0px 1px 1px 0px;}
        
    </style>
        
    <table  border="0" cellspacing="0" cellpadding="0">
            
    <tr>
                
    <td style="width:100px;" nowrap="nowrap" >中文中文阿飛的房間薩芬;撒</td>
                
    <td style="width:100px;" nowrap="nowrap" >saaaa</td>
            
    </tr>
        
    </table>

    如果去掉table-layout:fixed,表格的寬度會根據內容自動調整,比如上面的例子,如果去掉table-layout:fixed。第一個單元格的寬度會超過100px;
    但是最近發現,使用table-layout:fixed在webkit內核瀏覽器上(safari/chrome)。寬度顯示會出現問題。
    看看下面的例子:
     <style type="text/css">

                

            #test

            
    {

                border-collapse
    :collapse;

            
    }

            

            #test td, #test th

            
    {

                border
    :solid 1px black;

                padding
    :3px;

            
    }



        
    </style>

    <table style="width:736px;table-layout:fixed;margin:0;padding:0" id="test">

            
    <thead>

                
    <tr>

                    
    <th width="25">ID</th>

                    
    <th width="270">Name</th>

                    
    <th width="54">xx</th>

                    
    <th width="54">xx</th>

                    
    <th width="54">xx</th>

                    
    <th width="54">xx</th>

                    
    <th width="54">xx</th>

                    
    <th width="54">xx</th>

                    
    <th width="54">xx</th>

                
    </tr>

            
    </thead>

            
    <tbody>

                
    <tr>

                    
    <td>111</td>

                    
    <td></td>

                    
    <td>&nbsp;</td>

                    
    <td>&nbsp;</td>

                    
    <td>&nbsp;</td>

                    
    <td>&nbsp;</td>

                    
    <td>&nbsp;</td>

                    
    <td>&nbsp;</td>

                    
    <td>&nbsp;</td>

                
    </tr>

            
    </tbody>

        
    </table>

    瀏覽器上的截圖為:


    搜了一番資料后。在webkit官網上有這么一個Bug

    If a table has both "table-layout: fixed" and "width: 0", then cells with
    borders have wrong width.
    This occurs in both safari 3.x mac&win and linux svn 31841 (debian sid).
    The expected behavior is rendered by IE6, IE7, Firefox 2, Firefox 3 beta and
    Opera 9.2.
    
    Consider a table with 3 columns, all with width 200px.
    If one of the cells have "border-left: 50px; width: 150px;",
    then according to the rules of "table-layout: fixed", the cell should still
    have width 200px.
    But webkit renders the cell with only width 150px.


    就是設置了table-layout:fixed之后,table的td寬度style.width不再是內容的寬度,而是內容+邊框。而且是忽視padding。這讓人很郁悶。
    總之一旦設置了table-layout:fixed之后,webkit瀏覽器的單元格寬度并不會像你想象的那樣準確的寬度。

    參考資料:
    webkit的bug描述:
    https://bugs.webkit.org/show_bug.cgi?id=13339
    https://bugs.webkit.org/show_bug.cgi?id=18565
    stackoverflow的提問:
    http://stackoverflow.com/questions/2943369/table-layoutfixed-rendering-differences-in-safari

    http://lists.macosforge.org/pipermail/webkit-unassigned/2008-April/071125.html







    posted on 2011-06-30 18:39 衡鋒 閱讀(1845) 評論(1)  編輯  收藏 所屬分類: Web開發

    評論

    # re: mark:webkit表格設置css table-layout:fixed的bug 2012-07-02 12:17 hafeyang

    此bug,webkit已經修復 https://bugs.webkit.org/show_bug.cgi?id=78412  回復  更多評論   

    主站蜘蛛池模板: 亚洲影院在线观看| 亚洲人成无码网WWW| 国产美女在线精品免费观看| 亚洲精品成人片在线播放 | 国产AV无码专区亚洲A∨毛片| 黄色免费在线网址| 无码不卡亚洲成?人片| 老汉色老汉首页a亚洲| 中文字幕免费在线观看| 免费日本黄色网址| 香蕉97碰碰视频免费| 亚洲人妻av伦理| 免费福利在线视频| 亚洲视频在线观看视频| 国产精品视频免费| 久久亚洲精品无码网站| 免费夜色污私人影院在线观看| 亚洲美女人黄网成人女| 一二三四影视在线看片免费| 亚洲第一成年网站视频| 1000部拍拍拍18勿入免费视频下载| 亚洲一区二区三区高清| 国产成人A在线观看视频免费| 久久久久久久久无码精品亚洲日韩| 大胆亚洲人体视频| 免费精品久久天干天干| 亚洲人成影院77777| 18禁在线无遮挡免费观看网站| 亚洲AV福利天堂一区二区三| 国产成人福利免费视频| 精品成人一区二区三区免费视频| 亚洲精品无码AV中文字幕电影网站| 亚洲av成人一区二区三区在线播放 | 亚洲精品无码久久久久sm| 最近中文字幕电影大全免费版 | 区三区激情福利综合中文字幕在线一区亚洲视频1 | 国产男女猛烈无遮档免费视频网站| 特级做a爰片毛片免费看| 国产成人啪精品视频免费网| j8又粗又长又硬又爽免费视频 | 无码国产精品一区二区免费|