Высота строки таблицы и высота строки списка в Chrome при увеличении и уменьшении масштаба

Question

Здесь на первом изображении, когда браузер имеет значение 100%

Здесь на втором изображении, когда браузер имеет значение 90% или 110% или 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.