necolas / normalize.css

A modern alternative to CSS resets
http://necolas.github.io/normalize.css/
MIT License
52.48k stars 10.67k forks source link

Since `line-height: 1.15` is set for `html`, vertical scrollbars appear on the table wrapper element #783

Open baooab opened 5 years ago

baooab commented 5 years ago

As described in the title,here show the code I'm using.

<style>
.table-wrapper {
  overflow: auto;
}

.table {
  border-collapse: collapse;
}
</style>

<div class="table-wrapper">
  <table class="table">
    <thead>
    <tr>
        <th>#</th>
        <th>Heading</th>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>Cell</td>
        ...
      </tr>
      ...
    </tbody>
  </table>
</div>

Online demo: https://codepen.io/zhangbao/pen/mYeNzb

To my surprise, unexpected vertical scroll bars appear on the table wrapper element.

I found that because normalize.css sets the line-height: 1.15 for html, and if I set the line-height to a value of 1.2 or greater, the vertical scrollbar disappears.

I want to know what the reason is, thank you !

dhurlburtusa commented 5 years ago

Thanks for creating the codepen for the repro.

I looked but I don't see any vertical scrollbars. I tried with Chrome 74. I tried with different zoom levels. But I can reproduce the issue.

What browsers are you seeing it in? Can you post a screen shot?

baooab commented 5 years ago

I am sorry for not telling you clearly.

The problem is the desktop computer of my company, using Chrome 74. Normal zoom is no problem, but when I change to 110% zoom, the vertical scrollbar appears.

微信图片_20190509234654

Toddses commented 5 years ago

The reason it's there is to normalize the value across all browsers. Most browsers default to 1.15, but not all, so it's normalized in this project.

769 is a relevant PR.