Question

我尝试为每个button和a.btn设置样式，使其在所有浏览器中看起来都相同。使用以下样式时，2个元素不会在Chrome和Firefox中排列。

＆＃13;

#wrap {
  border: 2px solid red;
}

button::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}
a.btn, button {
  display: inline-block;
  border: 2px solid transparent;
  border-radius: 3px;
  color: #fff;
  background-color: #777;
  padding: 2px 5px;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 16px;
  height: 27.2px;
  text-decoration: none;
  opacity: .85;
  cursor: pointer;
  box-sizing: border-box;
}

＆＃13;

<div id="wrap">
  <a href="#" class="btn">Link</a>
  <button>Link</button>
</div>

＆＃13;

我已经尝试将vertical-align更改为bottom，但是虽然确实会将元素移动到更加对齐的状态，但按钮上的文本看起来仍然不对齐（下面的演示））。

＆＃13;

#wrap {
  border: 2px solid red;
}

button::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}
a.btn, button {
  display: inline-block;
  border: 2px solid transparent;
  border-radius: 3px;
  color: #fff;
  background-color: #777;
  padding: 2px 5px;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 16px;
  height: 27.2px;
  text-decoration: none;
  opacity: .85;
  cursor: pointer;
  box-sizing: border-box;

  vertical-align: bottom;
}

＆＃13;

<div id="wrap">
  <a href="#" class="btn">Link</a>
  <button>Link</button>
</div>

＆＃13;

如何在Chrome和Firefox中同时显示两个元素？

Answer 1

从规则中删除height设置，仅使用padding参数微调高度：

#wrap {
  border: 2px solid red;
}

button::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}
a.btn, button {
  display: inline-block;
  border: 2px solid transparent;
  border-radius: 3px;
  color: #fff;
  background-color: #777;
  padding: 2px 5px;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 16px;
  text-decoration: none;
  opacity: .85;
  cursor: pointer;
  box-sizing: border-box;
}

<div id="wrap">
  <a href="#" class="btn">Link</a>
  <button>Link</button>
</div>

Answer 2

Chrome和Firefox都使用不同的渲染引擎来显示html（Chrome使用Blink，Firefox使用Gecko）。不同的浏览器使用不同的渲染引擎，因此我认为它不会在所有浏览器中看起来完全相同。

按钮＆amp;具有相同风格和内容的链接不排成一行

2 个答案: