如何删除仅在Google Chrome中可见的表格单元格周围的模糊边框 [英] How to remove faint borders around table cells only viewable in Google Chrome

问题描述

我有一个简单的示例:2个组成一个表格的表格单元，两个表格单元都有白色背景，而表格有黑色背景.表格的宽度是固定的，左侧表格单元的宽度和高度是固定的.

I have a simple example: 2 table cells comprising a table, both table cells have a white background and the table has a black background. The width of the table is fixed and the width and height of the left table cell are fixed.

当我在IE，Firefox或Opera中查看代码时，屏幕上看不到任何内容.在Google Chrome浏览器中查看时，表格单元格周围出现了淡淡的灰色轮廓.

When I view the code in IE, Firefox, or Opera, I see nothing on the screen as it should be. When I view in Google Chrome, I see a faint grey outline surrounding the table cells.

这是一个简单的示例，与涉及不同单元格中的背景图像的更为复杂的示例浓缩而成.

This is a simple example condensed from a much more complicated example involving background images in the different cells.

这就像在Chrome中的白色单元格和黑色表之间发生了抗锯齿一样.如何删除这些轮廓?

It is like there is anti-aliasing occurring between the white cells and the black table in Chrome. How do I remove those outlines?

#page {
  display: table;
  margin: 0 auto 0 auto;
  padding: 0;
  border: 0;
  width: 600px;
  border-spacing: 0;
  border-collapse: collapse;
  background-color: black;
}

#leftcol {
  display: table-cell;
  vertical-align: top;
  padding: 0;
  margin: 0;
  border: 0;
  width: 154px;
  height: 342px;
  background-color: white;
}

#content {
  display: table-cell;
  vertical-align: top;
  padding: 0;
  margin: 0;
  border: 0;
  background-color: white;
}

<div id="page">
  <div id="leftcol"></div>
  <div id="content" class="content"></div>
</div>

推荐答案

我遇到了这个问题，但意识到我已经以自己的CSS样式对整个表进行了定义. 我删除了定义

I had this but realised I had a definition it in my css style for the whole table. I removed the definition

td, th {
      border: 2px solid #ddd;
      padding: 4px;
      text-align: left;
    }

我的灰线消失了.

这篇关于如何删除仅在Google Chrome中可见的表格单元格周围的模糊边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！