CSS:从表中删除了td标签,剩下一点空间

时间:2014-05-02 10:28:33

标签: css google-chrome opera space css-tables

我一直试图按照自己的喜好搞乱我的MAL CSS(myanimelist)。我在webkit浏览器中遇到过这种奇怪的行为,例如chrome和opera,当我重新定位td元素时会留下额外的空间。

这就是我得到的:

我为这个项目制作了一个jsfiddle,我基本上从我的动漫列表中粘贴了一些html代码并打了我的CSS代码。

http://jsfiddle.net/qwwtt/1/

所以我完全做的是我从它应该去的地方移除了一个td元素,然后重新定位它并添加位置:fixed和display:block所以我可以随意移动它。现在的问题是,当使用Chrome或Opera查看时,它会在桌面位置留出空间。这是表行和单元格的CSS代码。 (td:nth-​​of-type(6)是我重新定位的那个)

tr [class^=td] {
    background-color: rgba(64,64,64,0);
    border-top: 1px solid rgba(255,255,255,0);
    border-bottom: 1px solid rgba(255,255,255,0);
    -webkit-transition: background-color 2s ease, border-color 1s ease;
    -moz-transition: background-color 2s ease, border-color 1s ease;
    -o-transition: background-color 2s ease, border-color 1s ease;
    transition: background-color 2s ease, border-color 1s ease;
}

tr:hover [class^=td] {
    background-color: rgba(255,255,255,0.25);
    border-top: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.5);
    -webkit-transition: background-color 0.25s ease, border-color 0.25s ease;
    -moz-transition: background-color 0.25s ease, border-color 0.25s ease;
    -o-transition: background-color 0.25s ease, border-color 0.25s ease;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

tr td[class^=td] {
    padding: 5px 0;
}

/**
*
* Per-column CSS
*
**/

tr td:nth-of-type(1)[class^=td], tr td:nth-of-type(1)[class=table_header] {
    width: 4%;
    min-width: 35px;
    max-width: 100px;
    text-align: right;
    padding-right: 5px;
}

tr td:nth-of-type(2)[class^=td], tr td:nth-of-type(2)[class=table_header] {
    min-width: 400px;
    text-align: center;
}

tr td:nth-of-type(3)[class^=td], tr td:nth-of-type(3)[class=table_header],
tr td:nth-of-type(4)[class^=td], tr td:nth-of-type(4)[class=table_header],
tr td:nth-of-type(5)[class^=td], tr td:nth-of-type(5)[class=table_header],
tr td:nth-of-type(7)[class^=td], tr td:nth-of-type(7)[class=table_header],
tr td:nth-of-type(8)[class^=td], tr td:nth-of-type(8)[class=table_header],
tr td:nth-of-type(9)[class^=td], tr td:nth-of-type(9)[class=table_header],
tr td:nth-of-type(10)[class^=td], tr td:nth-of-type(10)[class=table_header] {
    width: 8%;
    min-width: 75px;
}

tr td:nth-of-type(6)[class^=td], tr td:nth-of-type(6)[class=table_header] {
    -webkit-backface-visibility: hidden;
    pointer-events: none;
    position: fixed;
    bottom: 10px;
    left: 2%;
    width: 40%;
    opacity: 0;
    -webkit-transform: translate(0px,50px);
    -moz-transform: translate(0px,50px);
    -ms-transform: translate(0px,50px);
    transform: translate(0px,50px);
    -moz-transition: 1s ease-out;
    -webkit-transition: 1s ease-out;
    -o-transition: 1s ease-out;
    transition: 1s ease-out;

    padding: 5px 5px;
    background-color: #000;
    border: 2px solid rgba(255,255,255,0.75);
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(255,255,255,0.5);
    text-align: justify;
}

tr:hover td:nth-of-type(6)[class^=td] {
    opacity: 1;
    -webkit-transform: translate(0px,0px);
    -moz-transform: translate(0px,0px);
    -ms-transform: translate(0px,0px);
    transform: translate(0px,0px);
    -moz-transition: 0.25s ease-out 0.25s;
    -webkit-transition: 0.25s ease-out 0.25s;
    -o-transition: 0.25s ease-out 0.25s;
    transition: 0.25s ease-out 0.25s;
}

0 个答案:

没有答案