Question

我有这个HTML。这是一个显示行和自定义滚动条的简单结构。我使用table-table-row方法来设置正确的元素维度。

当你有7个div（行）时，滚动条的尺寸正确。

如果添加第8个，则滚动条元素无法按预期工作。为什么？有什么办法解决吗？ TH。

对于相同的身份，您可以在chrome dev-tools

中看到它

 * {
   margin: 0;
   padding: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 .boxsize {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 body {
   margin: 0px 0px 0px 0px;
   height: 100%;
   padding: 0px;
   cursor: default;
   font-family: 'Open Sans', Arial;
   font-weight: 500;
   myback_grey60*nosel;
 }
 .tt {
   ;
 }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>

<body style="margin:0px; position:absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;background-color: rgb(24, 195, 133);">
  <div style="overflow: hidden; height: 200px; width: 500px;">
    <div style="overflow: hidden;display: table;width: 100%;height: 100%;">
      <div style="overflow: hidden;display: table-row;height: 1px;"><span style="float: left;">List</span>
      </div>
      <div style="overflow: hidden;display: table-row;">
        <div style="width: 100%; height: 100%; display: block; overflow: hidden;border: 1px solid #646464;">
          <div style="float: right; display: table;height: 100%;width: 20px;padding: 0px 2px 0px 2px;">
            <div style="display: table-row; height: 20px; width: 100%;">
              <div style="background-color: rgb(245, 24, 58);width: 100%;height: 100%;display: block;"></div>
            </div>
            <div style="display: table-row;">
              <div style="height: 100%; position: relative;">
                <div style="left: 9px;position: absolute;  width: 2px;  height: 100%;  background-color: #c8c8c8;  border: 1px solid #00ffff;"></div>
                <div style="left: 0px; height: 40px; top: 0px;position: absolute;  min-height: 40px;  width: 20px;  background-color: #323232;  border: 1px solid #4b4b4b;"></div>
              </div>
            </div>
            <div style="display: table-row; height: 20px; width:100%">
              <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gMGDywyfJGP4AAAAQVJREFUSMftlcFthDAQRf98ghASBxpARAhxTilpIR0sFSTbAdvBlkA6IBVkz5y4IiHkDmYvmyjaGBYvuUTin+wZz3+2NbKBTZvWSq4DbdvGIrLzPA8kQRK28UQ+JflOsv7ye7BAnwC8rtj0I4BvAC0LTgDMCsDHz8kvQFEURkQOd5obANUsAADyPH8D0Lm6q2pJ0twEXFQ6+p983z9eBycBWZbVABqX3dvinO1hkf1C8yYIgsYZkKZpIyLHBYyXqQQXFO9vtG0VhmF3NyBJkg7AVNsaVZ29Ri56T0Qq2ylU9RBFkfmzh6vv+89hGHQcRzXGPC+poQtARMrLSZo4juvtr/gfOgP1/0G+VuNXVwAAAABJRU5ErkJggg=="
              width="12" height="12" style="cursor: pointer;">
            </div>
          </div>
          <div style="float: none; overflow: hidden;">
            <div style="height: 22px;background-color: rgb(240, 240, 206);"></div>
            <div style="height: 22px;background-color: rgb(42, 42, 37);"></div>
            <div style="height: 22px;background-color: rgb(240, 240, 206);"></div>
            <div style="height: 22px;background-color: rgb(42, 42, 37);"></div>
            <div style="height: 22px;background-color: rgb(240, 240, 206);"></div>
            <div style="height: 22px;background-color: rgb(240, 240, 206);"></div>
            <div style="height: 22px;background-color: rgb(42, 42, 37);"></div>

          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

css table / table-row divs运行奇怪

0 个答案: