放大和缩小时Chrome中的表行高度和列表行高问题

Question

Here in first image when the browser is 100%

Here in the second image when browser is 90% or 110% or 120%

ul{
			margin: 0px;
			}
			ul li{
			list-style-type: none;
			height: 32px;
			line-height: 32px;
			border-bottom: 1px solid #ddd;
			width: 200px;
			}
			.Left {
				float: left;
				border-right: 1px solid #ddd;
			}
			tr td{
				text-decoration: none;
				height: 28px;
				line-height: 28px;
				border-bottom: 1px solid #ddd;
				width: 100px;
				padding-left: 5px;
				position: relative;
				left: -2px;
			}
			table thead tr th {
				display: none;
			}
			a{
				text-decoration: none;
			}

<div>
			<div class="Left">
				<div class="title">
					<ul>
						<li><a href="#">Header</a></li>
					</ul>
				</div>
				<div>
					<ul>
						<li><a href="#">Name1</a></li>
						<li><a href="#">Name2</a></li>
						<li><a href="#">Name3</a></li>
						<li><a href="#">Name4</a></li>
						<li><a href="#">Name5</a></li>
						<li><a href="#">Name6</a></li>
					</ul>
				</div>
			</div>
			<div>
				<div>
					<table>
						<thead>
							<th>
								<td>
									<a href="#">Status</a>
								</td>
							</th>
						</thead>
						<tbody>
							<tr>
								<td><a href="#">Status1</a></td>
							</tr>
							<tr>
								<td><a href="#">Status1</a></td>
							</tr>
							<tr>
								<td><a href="#">Status1</a></td>
							</tr>
							<tr>
								<td><a href="#">Status1</a></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>

这是我的html和css代码，以及上面添加的屏幕截图。这个问题只出现在其他浏览器的chrome浏览器中没有问题。我在其他浏览器中检查过。

任何人都可以帮我解决这个问题。谢谢。

Answer 1

诀窍是确保左侧的结构与右侧的结构具有相同的指标。所以填充，线高，高度等没有区别。有点像这样：

/* make sure the ul and the table have the same metrics */
.Left ul, table {
  border-spacing: 0;
  border: 0;
  margin: 0;
}

/* ditto for the list items and table cells */
.Left li, td {
  box-sizing: content-box;
  line-height: 32px;
  border-bottom: 1px solid #ddd;
  margin: 0;
  padding: 0;
}
 
ul li {
  list-style-type: none;
  width: 200px;
}

.Left {
  float: left;
  border-right: 1px solid #ddd;
}

tr td {
  text-decoration: none;
  width: 100px;
  padding-left: 5px;
}

table thead tr th {
  display: none;
}

a {
  text-decoration: none;
}

<div>
  <div class="Left">
    <div class="title">
      <ul>
        <li><a href="#">Header</a></li>
      </ul>
    </div>
    <div>
      <ul>
        <li><a href="#">Name1</a></li>
        <li><a href="#">Name2</a></li>
        <li><a href="#">Name3</a></li>
        <li><a href="#">Name4</a></li>
        <li><a href="#">Name5</a></li>
        <li><a href="#">Name6</a></li>
      </ul>
    </div>
  </div>
  <div>
    <div>
      <table>
        <thead>
            <td>
              <a href="#">Status</a>
          </td>
        </thead>
        <tbody>
          <tr>
            <td><a href="#">Status1</a></td>
          </tr>
          <tr>
            <td><a href="#">Status1</a></td>
          </tr>
          <tr>
            <td><a href="#">Status1</a></td>
          </tr>
          <tr>
            <td><a href="#">Status1</a></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

但这并不像我预期的那样好;某些缩放因素仍有差异。可能是我忘记了一个或多个属性;当我想到一些我会更新。

Answer 2

这是我只修改CSS的解决方案： （并在HTML中做了一点修改，因为td不应该在th中）

.Left, ul, li, table, tr, td {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  border: 0;
}

.Left {
  float: left;
  border-right: 1px solid #ddd;
}

li {
  width: 200px;
}

td {
  width: 100px;
}

table thead {
  display: none;
}

li,
td {
  height: 28px;
  line-height: 28px;
  list-style-type: none;
  border-bottom: 1px solid #ddd;
  margin: 0;
  padding: 0 0 0 8px;
}

a {
  text-decoration: none;
}

<div>
  <div class="Left">
    <div class="title">
      <ul>
        <li><a href="#">Header</a></li>
      </ul>
    </div>
    <div>
      <ul>
        <li><a href="#">Name1</a></li>
        <li><a href="#">Name2</a></li>
        <li><a href="#">Name3</a></li>
        <li><a href="#">Name4</a></li>
        <li><a href="#">Name5</a></li>
        <li><a href="#">Name6</a></li>
      </ul>
    </div>
  </div>
  <div>
    <div>
      <table>
        <thead>
          <th>
            <!-- td NOT NECESSARY -->
            <a href="#">Status</a>
            <!-- /td NOT NECESSARY -->
          </th>
        </thead>
        <tbody>
          <tr>
            <td><a href="#">Status1</a></td>
          </tr>
          <tr>
            <td><a href="#">Status1</a></td>
          </tr>
          <tr>
            <td><a href="#">Status1</a></td>
          </tr>
          <tr>
            <td><a href="#">Status1</a></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

我在桌子上使用border-collapse: collapse;，以便在单元格之间没有空间。这样，我们可以为li和td元素设置相同的高度。