元素上的边框折叠问题不是表格

如何解决元素上的边框折叠问题不是表格

我一直试图在要合并的元素上设置边框......我认为边框折叠将是一个简单的解决方案......但显然不是，或者我正在滥用它。

这是我的代码...

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
  <link href="https://fonts.googleapis.com/css?family=Inter:400,800,900&display=swap" rel=stylesheet">
  <link href="style.css" rel="stylesheet"> 
  <title>Responsive Grid</title>
</head>
<body>
  <div class="container">
    <nav>Navbar</nav>
    <main>Main</main>
    <div id="sidebar">Sidebar</div> 
    <div id="content1">Content1</div>
    <div id="content2">Content2</div>
    <div id="content3">Content3</div>
    <footer>Footer</footer>
  </div>
</body>
</html>

style.css:

body {
  box-sizing: border-box;
}
.container > * {
  border:green 1px solid;
  border-collapse:collapse;
}
.container {
  display:grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}

我仍然看到元素相遇的 2px 边框的外观。感谢您的帮助...我环顾四周，但我没有找到答案。再次感谢！

解决方法

此代码段适用于问题中给出的特定情况（4 列网格中的 7 个元素），方法是使用（简单）方法使各种边框透明，因此不会加倍：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
  <link href="https://fonts.googleapis.com/css?family=Inter:400,800,900&display=swap" rel=stylesheet">
  <link href="style.css" rel="stylesheet"> 
  <style>
body {
  box-sizing: border-box;
}

.container > * {
  border:green 1px solid;
  position: relative;
  overflow: visible;
}

.container > *:nth-child(2),.container > *:nth-child(3),.container > *:nth-child(4),.container > *:nth-child(6),.container > *:nth-child(7) {
  border-left-color: transparent;
}

.container > *:nth-child(5),.container > *:nth-child(7) {
  border-top-color: transparent;
}

.container {  
  display:grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}
</style>
  <title>Responsive Grid</title>
</head>
<body>
  <div class="container">
    <nav>Navbar</nav>
    <main>Main</main>
    <div id="sidebar">Sidebar</div> 
    <div id="content1">Content1</div>
    <div id="content2">Content2</div>
    <div id="content3">Content3</div>
    <footer>Footer</footer>
  </div>
</body>
</html>

更复杂的尝试可以在一般情况下工作 - 例如，伪元素覆盖先前同级元素的边框 - 仅在理论上有效，因为单个像素的放置在不同的显示器上可能会有所不同，因此结果可能是半个 (CSS) 像素例如。

元素上的边框折叠问题不是表格

如何解决元素上的边框折叠问题不是表格

解决方法

相关推荐