放大和缩小时Chrome中的表行高度和列表行高问题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了放大和缩小时Chrome中的表行高度和列表行高问题相关的知识,希望对你有一定的参考价值。
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浏览器中没有问题。我在其他浏览器中检查过。
任何人都可以帮我解决这个问题。谢谢。
答案
诀窍是确保左侧的结构与右侧的结构具有相同的指标。所以填充,线高,高度等没有区别。有点像这样:
/* 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>
另一答案
这是我只修改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>
以上是关于放大和缩小时Chrome中的表行高度和列表行高问题的主要内容,如果未能解决你的问题,请参考以下文章
react-native-maps :如何在放大和缩小时获取动态 latitudeDelta 和 longitudeDelta 值