Question

创建带有符号（例如金钱）的HTML输入时，我遇到了问题。 Chrome和Firefox似乎呈现了＆＃34; money-symbol＆＃34;不同。

HTML

<div class="inputlabel">
  <label>
    Some Label
  </label>
  <span class="inputlabel-span input-symbol-euro">
    <input type="text"/>
  </span>
</div>

CSS

.inputlabel label{ display: block}
.inputlabel input{ line-height:50px;}

.inputlabel-span {
  position: relative;
}
.inputlabel-span input {
  padding:0;
  width:200px; 
  border:none;
}
.inputlabel-span:after {
  position: absolute;
  top:0;
  content: "€";
  right: 0px;
}

链接到小提琴：https://jsfiddle.net/g0ztgcw8/9/

Answer 1

这是因为将input置于span内的元素间距。您可以通过注释输入元素末尾和结束span标记之间的空白来解决此问题：

.inputlabel label{ display: block}
.inputlabel input{ line-height:50px;}

.inputlabel-span {
  position: relative;
}
.inputlabel-span input {
  padding:0;
  width:200px; 
  border: none;
}
.inputlabel-span::after {
  position: absolute;
  top:0;
  content: "€";
  right: 0px;
}

<div class="inputlabel">
  <label>
    Some Label
  </label>
  <span class="inputlabel-span input-symbol-euro">
    <input type="text"/><!--
--></span>
</div>

<p></p>
<div style="width:200px;background-color:red;">
This div has 200px
</div>

您会看到Chrome中没有任何变化，代码现在会正确显示Firefox上输入元素内的欧元符号。

Answer 2

如果你在跨度上添加一个边框，你会看到，在chrome中它只有一个很小的高度，因为跨度在display:inline 强制跨度为display:inline-block并在方便时更改代码的其余部分，您无需在所有浏览器中制作一些技巧来解决这个问题，它在所有浏览器中都是相同的。

Answer 3

那些浏览器显示的不同，是因为这些浏览器中内联元素的呈现顺序不同。首先定位然后渲染＆＃34;€＆＃34;在一个浏览器中，或在另一个浏览器中反过来。尝试给它一个宽度，如.inputlabel-span:after { width: 12px; }或类似的东西。

将input标记放在范围内是一种相当糟糕的做法，这种行为的另一个原因。如果您想要保留此DOM结构，至少应该将display: inline-block添加到此 span 。您的 ：after 元素需要额外的top: 50%; transform: translateY(-50%)才能将其垂直居中。

我还建议您始终定义* { box-sizing: border-box }，但这与您的问题无关。

：在Chrome和Firefox之间的跨度定位不同之后

3 个答案: