Question

我在ah元素中添加了一个按钮，按钮样式是1px实体的边框，在其他任何地方都可以正常工作，但是当我在内部添加啊标签时，边框会有一个奇怪的重量，所以它看起来不像像1px一样

我注意到这是因为h2中的transform属性，如何才能正确地实现1px的变换和边界？

h2 {
  margin: 32px 32px 64px;
  -webkit-transform: translateY(30%);
  transform: translateY(30%)
}

.c-btn {
  display: inline-block;
  padding: 8px 16px;
  cursor: pointer;
  transition: 500ms;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  line-height: inherit;
  background-color: transparent;
  border: 1px solid black;
  color: black;
  font-size: 18px;
  letter-spacing: 2px;
 }

<h2 id="title-1">This is the title<button class="c-btn"><use xlink:href="#"></use>WATCH VIDEO</button></h2>

Here is a JSfiddle for reference

Answer 1

试试这个。

h2 {
  margin: 32px 32px 64px;
  -webkit-transform: translateY(30%) translateX(0%);
  transform: translateY(30%) translateX(0%);
}

.c-btn {
  display: inline-block;
  padding: 8px 16px;
  cursor: pointer;
  transition: 500ms;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  line-height: inherit;
  background-color: transparent;
  border: 1px solid black;
  color: black;
  font-size: 18px;
  letter-spacing: 2px;
 }

<h2 id="title-1">This is the title<button class="c-btn"><use xlink:href="#"></use>WATCH VIDEO</button></h2>

Answer 2

谢谢，我在这里找到了一个解决方案：enter link description here

请参阅2014年更新的perspective (1px)篇

Answer 3

这似乎是chrome中的一个错误，解决这个问题的最简单方法是添加转换的转换函数，其十进制值为.1％，如下所示。有关此问题的更多详细信息，请查看参考资料

＆＃13;

/* Fixing CSS for h2 blurry borders*/
h2 {
  margin: 32px 32px 64px;
  -webkit-transform: translateY(31.1%);
  transform: translateY(31.1%)
}
/* Original CSS for h2 */
h2#title-2 {
  margin: 32px 32px 64px;
  -webkit-transform: translateY(30%);
  transform: translateY(30%)
}

.c-btn {
  display: inline-block;
  padding: 8px 16px;
  cursor: pointer;
  transition: 500ms;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  line-height: inherit;
  background-color: transparent;
  border: 1px solid black;
  color: black;
  font-size: 18px;
  letter-spacing: 2px;
 }

＆＃13;

<!-- without issue -->
<h2 id="title-1">This is the title<button class="c-btn"><use xlink:href="#"></use>WATCH VIDEO</button></h2>
<!-- with issue -->
<h2 id="title-2">This is the title<button class="c-btn"><use xlink:href="#"></use>WATCH VIDEO</button></h2>

<button class="c-btn"><use xlink:href="#"></use>WATCH VIDEO</button>

＆＃13;

<强>参考文献：

CSS3 Transform Blurry Borders

在h标签内添加按钮时的边框重量很奇怪

3 个答案: