html - Span在不同浏览器上的定位

Question

我有下一个 html 元素:

<span class="ember-power-select-multiple-option">
      <span aria-label="remove element" class="ember-power-select-multiple-remove-btn">×</span>
      самбука 
</span>

使用这些样式:

.ember-power-select-multiple-option {
    padding-left: 2px;
    padding-right: 5px;
    margin: 2px;
    font-size: 13px;
    font-family: CenturyGothic;
    height: 21px;
    -webkit-font-smoothing: antialiased;
    border-radius: 10px;
    border: none;
    color: #fff!important;
    line-height: 19px;
    background-color: #FFB000;
    padding: 0 4px;
    display: inline-block;
    float: left;
}

.ember-power-select-multiple-remove-btn {
    width: 15px;
    height: 15px;
    display: inline-block;
    line-height: 13px;
    padding: 0;
    text-align: center;
    vertical-align: text-bottom;
    color: #fff;
    opacity: 1!important;
    font-size: 15px;
    font-family: sans-serif;
}

我正在努力实现下一个目标:带有文本的跨度和带有“X”符号的另一个跨度。所有它必须垂直对齐到中间。现在我有了这个 在 MacOS X Chrome 上(我觉得还不错)和 在 Windows7 Chrome 上。我怎样才能使它们看起来一样？而且我确实存在比我使用的更好的居中跨度的方法。

更新:

此外，我无法更改 html，因为它是插件的一部分。

Answer 1

您重复了 padding 等属性，这将覆盖同一类中的第一个属性。另外，同时使用inline-block 和float:left 不会对float 产生预期的效果，所以只需使用inline-block.

我对您的代码做了一些调整:

片段

body {
  box-sizing: border-box;
}
.ember-power-select-multiple-option {
  margin:2px;
  font-size: 13px;
  font-family: CenturyGothic;
  height: 21px;
  -webkit-font-smoothing: antialiased;
  border-radius: 10px;
  border: none;
  color: #fff;
  line-height: 17px;
  background-color: #FFB000;
  padding: 0 4px;
  display: inline-block;
}
.ember-power-select-multiple-remove-btn {
  width: 15px;
  height: 15px;
  display: inline-block;
  line-height: 17px;
  padding: 0;
  vertical-align: middle;
  color: #fff;
  font-size: 15px;
  font-family: sans-serif;
}

<span class="ember-power-select-multiple-option">
      <span aria-label="remove element" class="ember-power-select-multiple-remove-btn">×</span>
самбука
</span>