这些图标在表格内。我尝试了text-decoration: none
作为图标的CSS,但是没有用。如果我仅使用1个图标,则不再存在该点/线。如果我使用2个或更多图标,则该点/线将出现在每2个图标之间。
我还尝试将text-decoration: none
放入table
,tr
和td
的CSS中,但仍然无法正常工作。
.details-icon {
width: 40px;
height: 40px;
color: aqua;
text-decoration: none;
text-shadow: 0px 0px 20px aqua;
}
.delete-icon {
width: 40px;
height: 40px;
color: aqua;
text-decoration: none;
text-shadow: 0px 0px 20px aqua;
}
tr {
padding: 0px;
margin: 0px;
word-wrap: break-word;
height: 60px;
font-family: Luxia;
min-height: 100px;
max-width: 150px;
}
td {
font-family: Luxia;
border: 0px;
padding: 0px;
margin: 0px;
min-height: 100px;
max-width: 150px;
word-wrap: break-word;
}
th {
font-family: Luxia;
border: 0px;
padding: 0px;
margin: 0px;
min-height: 100px;
max-width: 150px;
word-wrap: break-word;
}
thead {
color: aqua;
background: linear-gradient(to right, #060b21, #13182e, #060b21);
min-height: 100px;
max-width: 150px;
word-wrap: break-word;
}
table {
top: 300px;
left: 0px;
z-index: 1;
position: relative;
background-color: #060b21;
width: 100%;
min-height: 1px;
text-align: center;
color: white;
font-size: 110%;
font-family: Luxia;
border-spacing: 0;
word-wrap: break-word;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<table>
<tr>
<td>
<i class=" edit-icon fa fa-pencil" style="font-size:24px;" title="Editare"></i>
<i class="delete-icon fa fa-close" style="font-size:24px;" title="Eliminare"></i>
<i class="details-icon fa fa-align-center" style="font-size:24px;" title="Detalii"></i>
</td>
</tr>
</table>
答案 0 :(得分:0)
https://jsfiddle.net/9usb7c8h/5/
我相信我已经找到了问题,但是,找不到解决方案。在清理了这个jsfiddle中的代码以使其更易于阅读之后,我开始使用浏览器检查器进行编辑。我发现,浏览器本身利用的用户代理样式表似乎总是将表的border-spacing
属性放在2px
处,这似乎是您所看到的差距。
我试图通过将css放在表中来手动覆盖它:
border-spacing: 0px;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
在代码中,但是无论如何我都无法覆盖它,即使使用!important之后,它也无法正常工作。我确实希望对您实际看到的问题给您一些见识。
抱歉无法完全回答问题,但我希望这至少对您有用。