一个里面的文字和背景图片 div

Question

我有一个 div 的消息。它有一个带有文本和相应图标（错误、警告等）的内部 div。

<div id="outer">
  <div id="inner"><!-- contains the styles for background images (icon) -->
    message text (default)
  </div>
</div>

我还有javascript（我无法更改js）：

var field = getElementById("outer");
field.innerHTML = "message text (specific)";

这个js删除了div#inner.
如果我制作一个 div 那么我应该移动背景图像：

background-position: left 20px center;

在背景位置使用 px 是 CSS3 功能。它在 CSS3-.
中不起作用大小写不正确 (IE8)

正确（Firefox、Chrome 等）

如何在没有内部 div 的情况下移动 div 内部的背景图像？ JS 代码（以上）应该可以正常工作（我无法修复 js）。
更新：
我希望只有一个 div（外部），并删除内部 。

Answer 1

您可以使用伪效果来实现：

jsfiddle

由于您可能使用不同的图像，您可以使用这个：

var field = getElementById("outer");
field.innerHTML = "message text (specific)";

#outer{
    width:200px;
    background:gray;
    border:5px solid black;
    position:relative;
    text-align:center;
    padding:20px;
}
#inner:after{
    content:"";
    height:20px;
    width:20px;
    position:absolute;
    left:10%;
  
}
.redClass:after{
      background:red;    
}
.blueClass:after{
      background:blue;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
  <div id="inner" class="blueClass"><!-- contains the styles for background images (icon) -->
    message text (default)
  </div>
</div>

其中可以为特定图标添加 'redClass' 或 "blueClass"（即切换 jquery 中的类），例如 'Errors' 或 'info'

一个里面的文字和背景图片 div

Text and background image inside one div

html

css

markup

internet-explorer-8