我一直试图按照自己的喜好搞乱我的MAL CSS(myanimelist)。我在webkit浏览器中遇到过这种奇怪的行为,例如chrome和opera,当我重新定位td元素时会留下额外的空间。
这就是我得到的:
我为这个项目制作了一个jsfiddle,我基本上从我的动漫列表中粘贴了一些html代码并打了我的CSS代码。
所以我完全做的是我从它应该去的地方移除了一个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;
}