如何隐藏或删除图标之间的小点/线?

时间:2019-11-27 13:38:19

标签: html css

这些图标在表格内。我尝试了text-decoration: none作为图标的CSS,但是没有用。如果我仅使用1个图标,则不再存在该点/线。如果我使用2个或更多图标,则该点/线将出现在每2个图标之间。

我还尝试将text-decoration: none放入tabletrtd的CSS中,但仍然无法正常工作。

Here is a link with a print screen of my icons

.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>

1 个答案:

答案 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之后,它也无法正常工作。我确实希望对您实际看到的问题给您一些见识。

抱歉无法完全回答问题,但我希望这至少对您有用。