0

我正在尝试设计类似于 GitHub 的滑动文件浏览器的东西github滑动文件管理器

它大部分都在工作，但我正在尝试对其进行样式设置，并且我的边框得到了这个：

未对齐的边框

.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来修复它。但我想知道正确的解决方案是什么。

4

1 回答 1

1

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

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

  • 您可以rem在现代浏览器上以 (root em) 值构建网格。
  • 您可以使用该$container-width设置来覆盖计算的宽度 - 使用 px、% 或设置宽度。
  • 您可以围绕所有这些元素设置一个外部容器（可能是<body>？）。
  • 您可以在嵌套元素中更改字体大小，而不是在容器上。
于 2013-05-17T21:56:28.830 回答