Question

我正在使用div标签，我正在应用css。请在下面找到div标签

<div class="testcss">
</div>

我的css课程如下

.testcss
{
     background-image: url('images/imag2.gif');
     background-repeat: repeat-y;
     background-position: bottom-left;
     padding-left: 10px;
     padding-right: 10px;
}

div正在显示背景图像并在Mozilla其他浏览器中正常显示，但它在IE8和IE9中不起作用。即使它在IE10中运行良好。 background-repeat存在一些问题：在IE8和IE9中，repeat-y无法正常工作。有没有办法在IE8和IE9中解决这个问题。

非常感谢任何帮助。

先谢谢。

此致 Rahul Rathi

Answer 1

我相信你的语法错了，没有..它应该可以在IE8和IE9中运行...试试：

.testcss {
    background: url('images/imag2.gif') bottom left repeat-y;
    padding-left: 10px;
    padding-right: 10px;
}

http://jsfiddle.net/feitla/85XFu/

PS - 在IE9中测试过......背景重复得很好。如果div为空，请确保你的div实际上有一个设置的高度/宽度。

Answer 2

我同意@feitla关于你的语法错误的事实。您不能使用bottom-left，因为它在CSS的背景属性中不存在。

我也同意您只需使用background: url('images/imag2.gif') left repeat-y，因为它不再需要bottom，因为它已经在Y轴上重复并跨越容器的所有高度。

最后但并非最不重要的一点是，如果元素为空（如没有其他标记），则必须为元素设置宽度和高度，否则由于左边的填充，你只能看到20像素的宽度和对。

我认为从中获取的教训是，使用速记样式更安全，因为它使您的代码更清晰，更易于阅读。

你最终会得到：

HTML

<div class="testcss"></div>

CSS

.testcss {
   background: url('images/imag2.gif') repeat-y left;
   padding: 0 10px;
}

详细了解如何使用速记代码，因为它使CSS编写更清晰，更有趣......而且它并不像看起来那么难，here's a link to this specific issue and shorthand css for background。

css repeat-y在IE8中不起作用

2 个答案: