将表情符号放在段落中而不影响“行高”

Question

无论表情符号有多大，如何在不影响line-height的情况下将表情符号插入段落？ IE浏览器。像：

我得到的最接近的是position: absolute或vertical-align: text-top，其中没有一个可以胜任。

p img {
    height: 35px;
    display: inline;
}
#one img {
    vertical-align: text-top;
}
#two img {
    position: absolute;
}

<p id="one">Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>
<p id="two">Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>

我知道类似的问题here和here，但两者都已过时且没有正确答案。

Answer 1

您可以使用

margin-top: [something];
margin-bottom: [something];
vertical-align: middle;

[something]为(containerLineHeight - imageHeight) / 2。

另请注意，如果没有右边距或左边距，则可以使用margin: [something] 0。

例如，由于图片有height: 35px，假设容器有line-height: 20px，

margin: -7.5px 0; // (20px - 35px) / 2

＆＃13;

＆＃13;

p {
  line-height: 20px;
}
p img {
  height: 35px;
  display: inline;
  vertical-align: middle;
  margin: -7.5px 0;
}

＆＃13;

<p>Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>

＆＃13;

＆＃13;

＆＃13;

请注意，使用7.5px以上的值会因vertical-align: middle而受到伤害。因此，您可以使用类似

的内容

margin: -1000000px 0;

＆＃13;

＆＃13;

p img {
  height: 35px;
  display: inline;
  vertical-align: middle;
  margin: -1000000px 0;
}

＆＃13;

<p>Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>

＆＃13;

＆＃13;

＆＃13;

或者，您可以使用百分比，该百分比将根据生成的框containing block的宽度计算。

因此，假设容器的宽度大于图像的高度，margin: -50% 0应该足够了。

＆＃13;

＆＃13;

p img {
  height: 35px;
  display: inline;
  vertical-align: middle;
  margin: -50% 0;
}

＆＃13;

<p>Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>

＆＃13;

＆＃13;

＆＃13;

为了更安全，您还可以使用margin: -1000000% 0

之类的内容

＆＃13;

＆＃13;

p img {
  height: 35px;
  display: inline;
  vertical-align: middle;
  margin: -1000000% 0;
}

＆＃13;

<p>Marzipan chupa chups marzipan. Bear claw donut candy powder cupcake tart. Tiramisu cotton candy jelly biscuit pie <img src="https://rawgit.com/github/gemoji/master/images/emoji/bowtie.png"> Jelly beans muffin croissant. Cupcake cookie pudding tootsie roll wafer. Bear claw jelly gummies sugar plum bear claw candy chocolate jelly. Donut brownie pie dessert cupcake donut oat cake marshmallow.</p>

＆＃13;

＆＃13;

＆＃13;