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

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

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

    我是FE,也是Fe

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

    統(tǒng)計

    留言簿(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,表格的寬度會根據(jù)內(nèi)容自動調(diào)整,比如上面的例子,如果去掉table-layout:fixed。第一個單元格的寬度會超過100px;
    但是最近發(fā)現(xiàn),使用table-layout:fixed在webkit內(nèi)核瀏覽器上(safari/chrome)。寬度顯示會出現(xiàn)問題。
    看看下面的例子:
     <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官網(wǎng)上有這么一個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不再是內(nèi)容的寬度,而是內(nèi)容+邊框。而且是忽視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開發(fā)

    評論

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

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

    主站蜘蛛池模板: 波多野结衣免费在线| 国产一精品一AV一免费| 免费毛片a在线观看67194| 亚洲情a成黄在线观看动漫尤物| 久久国产乱子伦精品免费午夜| 亚洲成片观看四虎永久| 亚洲av无一区二区三区| 好吊妞在线新免费视频| 亚洲色少妇熟女11p| 午夜免费1000部| 亚洲国产精品综合久久20| 在线观看成人免费视频不卡| 亚洲婷婷综合色高清在线| 91精品免费国产高清在线| 亚洲国产韩国一区二区| 野花高清在线观看免费3中文| 亚洲 欧洲 视频 伦小说| 夫妻免费无码V看片| 在线视频亚洲一区| 国产大片免费观看中文字幕| 老司机免费午夜精品视频| 免费v片视频在线观看视频| 一级白嫩美女毛片免费| 国产亚洲综合网曝门系列| 香蕉成人免费看片视频app下载| 亚洲精品美女久久久久| 无码国产精品一区二区免费I6| 亚洲七久久之综合七久久| 伊在人亚洲香蕉精品区麻豆| 岛国精品一区免费视频在线观看| 亚洲成熟xxxxx电影| 99视频免费播放| 亚洲精品无码少妇30P| 亚洲不卡无码av中文字幕| a毛片免费在线观看| 亚洲精品日韩专区silk| 精品免费国产一区二区三区 | **毛片免费观看久久精品| 亚洲噜噜噜噜噜影院在线播放| 午夜免费福利在线| www在线观看播放免费视频日本|