时间戳

首页 > 解决方案 > 表格行和表格单元格组合问题，偏移 1 个像素

javascript - 表格行和表格单元格组合问题，偏移 1 个像素

问题描述

我尝试将一个图标和一个文本并排放置，使图标在左侧，文本在右侧，并且两者都可以自动垂直设置在中间。

我注意到一些问题，即元素的框由于某种原因偏离了 1 个像素，这意味着它上面的文本没有对齐。我不知道为什么，我试图改变很多东西，但还没有找到任何东西。

这是一个更好的版本：

这是小提琴：https ://jsfiddle.net/Ljzmu24q/

body {
    color: black;
    font-family: sans-serif;
}

body #pageWrapper {
    margin-right: 10px;
}


/* == Content == */

div#content {
	border: 0;
}


/* ==============
        Main
   ============== */
   
/* == Default Tables == */

table.wikitable > tr > th, table.wikitable > * > tr > th {
    background: rgba(181, 181, 181, 0.27);
    border: 1px solid #676767;
    color: white;
    text-align: center;
}

table.jquery-tablesorter th.headerSort {
    background-image: linear-gradient(#079993,#0f5182);
	background-position: right right;
    padding-right: 21px;
}

th {
    background: #1f1f1f;
    color: #ffffff;
    font-weight: bold;
    font-size: 116%;
    padding: 1px 7px;
    text-align: left;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

table.wikitable > tr > td, table.wikitable > * > tr > td {
    border: 1px solid #676767;
    padding: 0.2em;
}

table.diff, td.diff-otitle, td.diff-ntitle {
	background-color: rgba(171, 171, 171, 0.28);
}

.grid td {
	border: #5d5d5d 2px solid;
}



/* == CSS Class templates */
.colorinvert {
	filter: invert(1);
}



/* ==============
   Wiki Templates
   ============== */

.infobox,
.infoboxtable {
    background: #292929;
    font-size: 90%;
    color: white;
    float: right;
    margin: 0px 0px 5px 0px;
    padding: 3px 4px;
    border: 2px solid;
    border-color: #4a4a4a;
    border-radius: 2px;
    width: 300px;
}

.infoboxtable th.infoboxname {
	font-size: 1.5em;
}

.infobox td, .infoboxtable td {
	position: relative;
	vertical-align: top;
}
.infoboxtable td.td_box {
	border: none;
	background: #1f1f1f;
	color: #ffffff;
	font-weight: bold;
	padding: 1px 7px;
	text-align: right;
}

.infoboxtable td.td_box div.icontextbox {
	display: table-row;
	height: inherit;
}
.infoboxtable td.td_box div.icontextbox .image, 
.infoboxtable td.td_box div.icontextbox .label {
	display: table-cell;
	vertical-align: middle;
}
.infoboxtable td.td_box div.icontextbox .label {
	text-align: right;
	width: 100%;
}
/*.infoboxtable td .iconlabel {
	vertical-align: top;
	float: left;
}*/


.infobox td.infoboxlabel {
    background: rgba(0,0,0,0) linear-gradient(#079993,#0f5182);
    border: none;
    border-radius: 7px;
    color: #f2f2f2;
    padding: 1px 7px;
    text-align: right;
    vertical-align: top;
}

.infobox th.infoboxname {
    background: rgba(0,0,0,0) linear-gradient(#079993,#0f5182);
    border: none;
    color: #f2f2f2;
    font-size: 133%;
    font-weight: bold;
    padding: 8px;
    text-align: center;
}

.infoboxtable th.infoboxname {
    text-align: center;
}

.infoboxdetails {
    color: #ffffff;
    font-size: 110%;
    padding: 0em;
    text-align: center;
}
<table class="infoboxtable">
<tbody><tr>
<th colspan="2" class="infoboxname">Road sign
</th></tr>
<tr>
<td colspan="2" style="text-align:center;"><a href="/File:Road_Signs.png" class="image" title="Road sign"><img alt="Road sign" src="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/d8/Road_Signs.png/180px-Road_Signs.png?version=076b82bec5aabff34dd511d366b3c1db" decoding="async" width="180" height="180" srcset="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/d8/Road_Signs.png/270px-Road_Signs.png?version=076b82bec5aabff34dd511d366b3c1db 1.5x, https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/d8/Road_Signs.png/360px-Road_Signs.png?version=076b82bec5aabff34dd511d366b3c1db 2x"></a>
</td></tr>
<tr>
<th colspan="2" class="infoboxdetails">Description
</th></tr>
<tr>
<td colspan="2" style="text-align:center;">Some road signs made of metal.
</td></tr>
<tr>
<th colspan="2" class="infoboxdetails">General
</th></tr>




<tr>
<td class="td_box" style="width:50%"><div>Stack Size</div>
</td>
<td>3
</td></tr>
<tr>
<th colspan="2" class="infoboxdetails">Crafting
</th></tr>


<tr>
<td class="td_box" style="width:50%"><div class="icontextbox"><div class="image"><img alt="Icon stopwatch.png" src="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/d5/Icon_stopwatch.png/30px-Icon_stopwatch.png?version=7a97f683c6f6dd2df8718d36902e2bd8" decoding="async" width="30" height="30" class="iconlabel colorinvert" srcset="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/d5/Icon_stopwatch.png/45px-Icon_stopwatch.png?version=7a97f683c6f6dd2df8718d36902e2bd8 1.5x, https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/d5/Icon_stopwatch.png/60px-Icon_stopwatch.png?version=7a97f683c6f6dd2df8718d36902e2bd8 2x"></div><div class="label"><div>Time to Craft</div></div></div>
</td>
<td>1.0
</td></tr>
<tr>
<th colspan="2" class="infoboxdetails">Ingredients
</th></tr>
<tr>
<td colspan="2"><div style="display: inline-block;padding:1px;"><div style="position: absolute;"><a href="/Beancan_Grenade" title="Beancan Grenade"><img alt="Beancan Grenade.png" src="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/dd/Beancan_Grenade.png/50px-Beancan_Grenade.png?version=dbae46eefec6d26698b562e8f5cb1c74" decoding="async" width="50" height="50" srcset="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/dd/Beancan_Grenade.png/75px-Beancan_Grenade.png?version=dbae46eefec6d26698b562e8f5cb1c74 1.5x, https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/dd/Beancan_Grenade.png/100px-Beancan_Grenade.png?version=dbae46eefec6d26698b562e8f5cb1c74 2x"></a><span style="position:absolute; width:50px; height:50px; top:0; left: 0; z-index: 1;"><a href="/Beancan_Grenade" title="Beancan Grenade"><img alt="Beancan Grenade.png" src="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/dd/Beancan_Grenade.png/50px-Beancan_Grenade.png?version=dbae46eefec6d26698b562e8f5cb1c74" decoding="async" width="50" height="50" srcset="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/dd/Beancan_Grenade.png/75px-Beancan_Grenade.png?version=dbae46eefec6d26698b562e8f5cb1c74 1.5x, https://gamepedia.cursecdn.com/rust_gamepedia/thumb/d/dd/Beancan_Grenade.png/100px-Beancan_Grenade.png?version=dbae46eefec6d26698b562e8f5cb1c74 2x"></a></span></div>
<div style="display: table; height: 50px; width: 50px; overflow: hidden; line-height: normal;">
<div style="position: relative; bottom:2%; display: table-cell; vertical-align: bottom;">
<div style="position: relative; text-align: right; width: 98%; font-size: 11px; font-weight: bold; font-family: Tahoma, Geneva, sans-serif; color: white; text-shadow: -1px 0 0.2em black, 0 1px 0.2em black, 1px 0 0.2em black, 0 -1px 0.2em black; z-index:99999;">x4</div>
</div>
</div>
</div>
<div style="display: inline-block;padding:1px;"><div style="position: absolute;"><a href="/Small_Stash" title="Small Stash"><img alt="Small Stash.png" src="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/a/a8/Small_Stash.png/50px-Small_Stash.png?version=5927ae4d0b327eea50f216a4882757be" decoding="async" width="50" height="50" srcset="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/a/a8/Small_Stash.png/75px-Small_Stash.png?version=5927ae4d0b327eea50f216a4882757be 1.5x, https://gamepedia.cursecdn.com/rust_gamepedia/thumb/a/a8/Small_Stash.png/100px-Small_Stash.png?version=5927ae4d0b327eea50f216a4882757be 2x"></a><span style="position:absolute; width:50px; height:50px; top:0; left: 0; z-index: 1;"><a href="/Small_Stash" title="Small Stash"><img alt="Small Stash.png" src="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/a/a8/Small_Stash.png/50px-Small_Stash.png?version=5927ae4d0b327eea50f216a4882757be" decoding="async" width="50" height="50" srcset="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/a/a8/Small_Stash.png/75px-Small_Stash.png?version=5927ae4d0b327eea50f216a4882757be 1.5x, https://gamepedia.cursecdn.com/rust_gamepedia/thumb/a/a8/Small_Stash.png/100px-Small_Stash.png?version=5927ae4d0b327eea50f216a4882757be 2x"></a></span></div>
<div style="display: table; height: 50px; width: 50px; overflow: hidden; line-height: normal;">
<div style="position: relative; bottom:2%; display: table-cell; vertical-align: bottom;">
<div style="position: relative; text-align: right; width: 98%; font-size: 11px; font-weight: bold; font-family: Tahoma, Geneva, sans-serif; color: white; text-shadow: -1px 0 0.2em black, 0 1px 0.2em black, 1px 0 0.2em black, 0 -1px 0.2em black; z-index:99999;">x1</div>
</div>
</div>
</div>
<div style="display: inline-block;padding:1px;"><div style="position: absolute;"><a href="/Rope" title="Rope"><img alt="Rope.png" src="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/b/b4/Rope.png/50px-Rope.png?version=c1e469a98e537e4d5cdb9ce338d57b77" decoding="async" width="50" height="50" srcset="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/b/b4/Rope.png/75px-Rope.png?version=c1e469a98e537e4d5cdb9ce338d57b77 1.5x, https://gamepedia.cursecdn.com/rust_gamepedia/thumb/b/b4/Rope.png/100px-Rope.png?version=c1e469a98e537e4d5cdb9ce338d57b77 2x"></a><span style="position:absolute; width:50px; height:50px; top:0; left: 0; z-index: 1;"><a href="/Rope" title="Rope"><img alt="Rope.png" src="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/b/b4/Rope.png/50px-Rope.png?version=c1e469a98e537e4d5cdb9ce338d57b77" decoding="async" width="50" height="50" srcset="https://gamepedia.cursecdn.com/rust_gamepedia/thumb/b/b4/Rope.png/75px-Rope.png?version=c1e469a98e537e4d5cdb9ce338d57b77 1.5x, https://gamepedia.cursecdn.com/rust_gamepedia/thumb/b/b4/Rope.png/100px-Rope.png?version=c1e469a98e537e4d5cdb9ce338d57b77 2x"></a></span></div>
<div style="display: table; height: 50px; width: 50px; overflow: hidden; line-height: normal;">
<div style="position: relative; bottom:2%; display: table-cell; vertical-align: bottom;">
<div style="position: relative; text-align: right; width: 98%; font-size: 11px; font-weight: bold; font-family: Tahoma, Geneva, sans-serif; color: white; text-shadow: -1px 0 0.2em black, 0 1px 0.2em black, 1px 0 0.2em black, 0 -1px 0.2em black; z-index:99999;">x1</div>
</div>
</div>
</div>
</td></tr></tbody></table>

表使用的类是infoboxtable，代码在td.td_box

 

我的问题是，为什么它偏离了 1 个像素，我该如何解决？我也尝试通过将“Time to Craft”更改为与上述相同的“Stack Size”来比较它以更好地查看差异

标签： javascripthtmlcsshtml-table

解决方案

border-spacing: 0; ontd.td_box似乎已经修复了它并且还为顶部的那个进行了更改，我无法真正解释如果它在我将它嵌套在表格中时生成了一个额外的边框，它为什么或如何真正发生？

推荐阅读