我的目标是在基本上任何页面中动态(使用内容脚本)在文本上方注入图像,并保持文本正常对齐。我注入图像以使其具有特定属性的跨度,并且我的脚本(chrome 扩展的内容脚本)将跨度与另一个跨度(我 css 中的父项)包装在一起,该跨度具有 img(包装在自己的跨度)也是如此。
问题(CSS 问题)是当我注入图像时,文本的文本内衬被破坏了。
您可以在https://jsfiddle.net/wyfumrx6/2/ 中更清楚地看到这一切
“a Good”这个词没有与文本的其余部分放在一起。
这是我现在所做的,使用 inline-flex 和 flex-direction:
HTML 示例:
<a href="https://www.wikihow.com/Make-a-Good-Cup-of-Tea" style="/* line-height: 57px; *//* height: auto; */font-size: 150%;font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;/* height: 55px; *//* display: inline-flex; */">
<span id="div0" class="aui_top_in_page_parent" tabindex="0" style="">
<span id="span0" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/1/12313.png"
class="aui_header_images"></span>
<span aui-symbol="14907" aria-describedby="span0" accesskey="Shift + E">How
</span>
</span>
<span id="div5" class="aui_top_in_page_parent" tabindex="0">
<span id="span5" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/7/7194.png"
class="aui_header_images"></span>
<span aui-symbol="17982" aria-describedby="span5" accesskey="Shift + E">to</span></span> <span id="div6" class="aui_top_in_page_parent" tabindex="0"><span id="span6" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/3/32751.png"
class="aui_header_images"></span><span aui-symbol="15410" aria-describedby="span6" accesskey="Shift + E">Make</span></span>
a Good <span id="div7" class="aui_top_in_page_parent" tabindex="0"><span id="span7" class="aui_top_in_page"><img
src="http://www.arasaac.org/repositorio/thumbs/10/50/2/2429.png" class="aui_header_images"></span><span aui-symbol="13621 12324 17511" aria-describedby="span7" accesskey="Shift + E">Cup of Tea</span></span>
</a>
在这里可以清楚地看到结果:https : //jsfiddle.net/wyfumrx6/
我希望线条和文字在图像位于“标记”字词上方时保持直线,并且该图像与上面的文本行有足够的边距,以便清楚 img 指的是哪个字。
相关分类