HTML up ​​and down图标在所有浏览器中看起来都不同

Question

这是我的jsfiddle：

http://jsfiddle.net/73rqv02t/3/

<div class="jqx-splitter-collapse-button-horizontal jqx-fill-state-pressed jqx-splitter-collapse-button-hover jqx-fill-state-hover" style="height: 13px; width: 32px; position: relative; z-index: 10; left: 50%; top: 11px; margin-top: -1px; margin-left: -16px; line-height: 0px; color: rgb(169, 167, 167); border-width: 0px 1px 1px; border-color: rgb(153, 153, 153); border-style: solid; border-radius: 0px 0px 4px 4px; font-size: 40px; text-align: center;">⌄</div> <br/><br/><br/>

<div class="jqx-splitter-collapse-button-horizontal jqx-fill-state-pressed jqx-splitter-collapse-button-hover jqx-fill-state-hover" style="height: 11px; width: 32px; position: relative; z-index: 10; left: 50%; top: -11px; margin-top: -1px; margin-left: -16px; line-height: 0px; color: rgb(169, 167, 167); border-width: 1px 1px 0px; border-color: rgb(153, 153, 153); border-style: solid; border-radius: 4px 4px 0px 0px; font-size: 40px; text-align: center;">⌃</div>

即使所有样式都相同但如果你在不同的浏览器中查看它们，它们看起来总是不同。

有人能说出这里的问题是什么吗？

这是Firefox最新版本的显示方式：https://gyazo.com/e843e93d90e4410b093a57f4f4fa2cd8

这就是它在Chrome中的外观：https://gyazo.com/23d6fddb1ba7b3794f5cfa71588896f6

Answer 1

更改行高：30px，请不要使用内联样式。

＆＃13;

＆＃13;

.demo-top {
  height: 13px;
  width: 32px;
  position: relative;
  z-index: 10;
  left: 50%;
  top: 11px;
  margin-top: -1px;
  margin-left: -16px;
  line-height: 0px;
  color: rgb(169, 167, 167);
  border-width: 0px 1px 1px;
  border-color: rgb(153, 153, 153);
  border-style: solid;
  border-radius: 0px 0px 4px 4px;
  font-size: 40px;
  text-align: center;
}
.demo-bottom {
  height: 11px;
  width: 32px;
  position: relative;
  z-index: 10;
  left: 50%;
  top: -11px;
  margin-top: -1px;
  margin-left: -16px;
  line-height: 30px;
  color: rgb(169, 167, 167);
  border-width: 1px 1px 0px;
  border-color: rgb(153, 153, 153);
  border-style: solid;
  border-radius: 4px 4px 0px 0px;
  font-size: 40px;
  text-align: center;
}

＆＃13;

<div class="demo-top">⌄</div><br /><br />
<div class="demo-bottom">⌃</div>

＆＃13;

＆＃13;

＆＃13;