Question

问候Stackoverflow！

我在设置标签时无法完美像素化。这是代码库：x32

我的目标是让我的<svg>和<table id="time-h-axis">标签在其<div id="main-charts">父级中水平滚动，但不能垂直滚动。 <svg>和<table id="time-h-axis">的高度分别为330和70，这使得<div id="main-charts">的高度为400px。

但是，某些地方有一些额外的垂直像素（一个像素可以垂直滚动并在代码笔中看到div的浅绿色）... 我没有主意...需要帮助！谢谢;-）

HTML：

<div id="main-charts">            
  <table id="time-h-axis"><tr></tr></table>
  <svg height="330" width="11970"></svg>
</div>

CSS：

#main-charts {
  width:1000px;
  height: 400px;
  background-color: lightgreen;
  margin: 0px;
  border: 0px;
  padding: 0px;
  overflow: scroll;

}

#time-h-axis {
  border-spacing: 0px;
  width: 11970px;
  height: 70px;
  background-color: violet;
  padding: 0px;
  border: 0px;
  margin: 0px;
}

#main-charts svg {
  background-color: red;
  margin: 0px;
  border: 0px;
  padding: 0px;
}

Answer 1

将SVG设置为Source（为此SO Q&A），并将包装器设置为display:block

overflow:auto

#main-charts {
  width: 1000px;
  height: 400px;
  background-color: lightgreen;
  margin: 0px;
  border: 0px;
  padding: 0px;
  overflow: auto;
}

#time-h-axis {
  border-spacing: 0px;
  width: 11970px;
  height: 70px;
  background-color: violet;
  padding: 0px;
  border: 0px;
  margin: 0px;
}

#main-charts svg {
  background-color: red;
  margin: 0px;
  border: 0px;
  padding: 0px;
  display: block;
}

Codepen Demo

HTML + CSS高度/边距/边框/填充不累加

1 个答案: