Question

我正在尝试设计类似于GitHubs滑动文件浏览器 github sliding file manager

的内容

它主要是工作，但我试图设计它，我得到了我的边界：

mis-aligned borders

.claim-header, .support-header{
   text-align: center;
   background-color: $argument-review-banners;
  padding: 0.3em;
  font-family: "Jockey One",Arial,Georgia,sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px; // <--- this line breaks it
  text-transform: uppercase;
  border-color: black;
  border-style: solid;
}

看起来div中的字体大小（这些行中的每一行都是div，因为它不是真正的表格，因为我本身并不进行文件浏览）是打破它的原因，它似乎是因字体大小而计算的宽度不同。我认为susy根据基本字体计算宽度，而不是元素的字体。它偏离了2个像素，我想知道这是否是某种舍入错误。

我可以使用另一个包装div修复它。但我想知道适当的解决方案是什么。

Answer 1

此问题与Susy无关 - 任何基于em的宽度都会遇到同样的问题。 Susy无法知道您更改了字体大小，或者想要使用不同的em值 - 所有这些都是在浏览器级别计算的。

container mixin将在您使用它的每个地方输出相同的em宽度（给定相同的设置），但em是相对于本地字体大小的。这是由浏览器计算的，Susy不知道它，或控制它。有几种选择。

您可以在现代浏览器中使用rem（root em）值构建网格。
您可以使用$container-width设置覆盖计算的宽度 - 使用px，％或设置宽度。
您可以围绕所有这些元素设置单个外部容器（可能是<body>？）。
您可以更改嵌套元素中的字体大小，而不是容器上的字体大小。

如何对齐susy计算的左右边框？

1 个答案: