css - 绝对位置的内容未在所有浏览器中显示

Question

我正在使用 wordpress+gantry 框架构建一个站点，选择了响应式布局，并且我在屏幕左侧的背景上方有一张图片。这张左边的图片(某种没有其他内容的垂直侧边栏)用下一个代码绝对定位:

div.imgleft{
content: url('http://coszminart.ro/wp-content/uploads/2014/02/laterala.png');  
position: absolute;
margin-left: 0px; 
margin-top: -1px; 
max-height: 1020px;
height: 100%;
max-width: 570px; 
background-size: cover;
z-index: 1000  !important;
}

我在标题上方插入的 div.imgleft，在模板 index.php 中问题:左图在 iexplore 10、11、最新的 mozilla 中不显示，只在 chrome 和 android 手机中显示。如果我使用 chrome/firefox 检查工具进行验证，则 css 代码加载正常。我读过绝对定位是跨浏览器兼容的，为什么不起作用，是我的代码有问题吗？![在此处输入图片描述][1]

感谢您的帮助，抱歉英语不好。

Answer 1

content 属性与 :before 和 :after 伪元素一起使用，以插入生成的内容。

所以用

 background-image : url('http://coszminart.ro/wp-content/uploads/2014/02/laterala.png'); 

代替内容

这是工作 fiddle http://jsfiddle.net/krunalp1993/Az5GG/1/