Question

我目前正在尝试在我的应用程序中实现调试控制台。为此我有一个主div与以下CSS：

#~main_div~ {
    display: none; /* gets set to display: block when the users wants the console */
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 25%;
    max-height: 350px;
    background-color: rgba(153, 153, 153, 0.8);
    text-align: left;
    overflow-y: auto;
}

id~main_div~被实际持有加载帧调试控制台的元素所取代（所有这些都正确显示）

然后我向该div添加消息，该消息通常具有以下格式：

<p>
    <span class="title_notice">[timestamp] Title: </span>
    <span class="message_notice">The message</span>
</p>

但有时我想在文本中显示内联图像（如[图像]消息）。我通过以下方式完成此操作（示例）：

<p>
     <span class="title_notice">[timestamp] Title: </span>
     <span class="message_notice">The 
         <div style="display: inline-block; width: 25px; height: 25px; background-image:url(...);"></div>
         message
     </span>
</p>

如果你想知道我为什么使用div而不是img：它可以在图像中给出一个偏移量和一个大小，使它只显示图像的一部分，并且你不能用{{1}做到这一点}。

结果遗憾地看起来像这样： http://puu.sh/6gwdH.jpg（抱歉，由于代表我无法附加图片...）

问题1：div在新的linew上问题2：跨度上的格式（实际由img设置（字体系列，字体大小和字体粗细）和.message_notice（颜色））将丢失

有没有办法在文本中“内联”图像，使其在同一行和格式不会中断，并且只能选择图像的一部分？ 哦，解决方案只适用于webkit，不需要可移植性。

非常感谢提前和问候 Cromon

使用背景图像创建div与段落中的跨度

0 个答案: