时间戳

首页 > 解决方案 > 是什么让两个具有相同 CSS 属性的元素看起来不同？

html - 是什么让两个具有相同 CSS 属性的元素看起来不同？

问题描述

在下面的 HTML/CSS 页面中，我试图使链接和按钮看起来相同。原因是所使用的元素应该遵循它的含义（去某个地方还是做某事），而外观取决于对用户来说看起来不错的东西。

*,
 :after,
 :before {
  box-sizing: inherit
}

.button {
  margin: 0px;
  width: 100px;
  inline-size: 100px;
  padding: 20px;
  color: black;
  text-decoration: none;
  font-family: sans-serif;
  align-items: normal;
  perspective-origin: 60.8906px 44.5625px;
  transform-origin: 60.8984px 44.5625px;
  cursor: pointer;
  display: inline-block;
  min-height: 4em;
  outline: 0;
  border: none;
  vertical-align: baseline;
  background: #e0e1e2 none;
  font-weight: 700;
  line-height: 1em;
  text-align: center;
  font-size: 1rem
}

.container {
  height: 100px;
}
<div class="container">
  <a class="button" href="#">A</a>
  <button class="button">A</button>
</div>

看起来非常相似，但在 Chrome 和 Firefox 中，它们以不同的方式垂直排列。文本似乎在同一个 Y 上，但它周围的背景框却不是。如果他们以某种方式获得不同的 CSS 属性（可能来自用户代理样式表），我会期待这样的行为。

有趣的是，当我让浏览器 (Chrome) 向我显示所有计算的 CSS 属性时，它们都是相等的。我通过将每个元素的属性复制到文件中，然后对文件进行比较来验证这一点。

我还检查了元素的顺序是否相关，但不是——从某种意义上说，无论它们出现在元素顺序的哪个位置，链接/按钮看起来总是一样的。

为什么即使所有 CSS 属性都相同，但元素看起来却不同，需要进行哪些更改才能使它们看起来相同？

（第二个问题旨在确定问题的确切解决方法，而不仅仅是一些“猎枪方法”。）

标签： htmlcss

解决方案

我已经使用flexbox了这两个标签

*,
 :after,
 :before {
  box-sizing: inherit
}

.button {
  margin: 0px;
  width: 100px;
  inline-size: 100px;
  padding: 20px;
  color: black;
  text-decoration: none;
  font-family: sans-serif;
  align-items: normal;
  perspective-origin: 60.8906px 44.5625px;
  transform-origin: 60.8984px 44.5625px;
  cursor: pointer;
  display: inline-block;
  min-height: 4em;
  outline: 0;
  border: none;
  vertical-align: baseline;
  background: #e0e1e2 none;
  font-weight: 700;
  line-height: 1em;
  text-align: center;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.container {
  height: 100px;
}
<div class="container">
  <a class="button" href="#">A</a>
  <button class="button">A</button>
</div>

推荐阅读