0

我正在使用 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 存在一些问题：repeat-y 在 IE8 和 IE9 中无法正常工作。有什么方法可以在 IE8 和 IE9 中解决这个问题。

任何帮助将不胜感激。

提前致谢。

问候， 拉胡尔·拉蒂

4

2 回答 2

0

我相信你的语法是错误的，不......它应该在 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 实际上具有设置的高度/宽度。

于 2013-07-23T18:02:41.803 回答
0

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

我也同意你应该简单地使用background: url('images/imag2.gif') left repeat-yasbottom不需要，因为它已经在 Y 轴上重复并跨越容器的所有高度。

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

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

你最终会得到：

HTML

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

CSS

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

阅读有关如何使用速记代码的更多信息，因为它使编写 CSS 变得更干净、更有趣……而且它并不像看起来那么难，这里有一个指向这个特定问题的链接和用于 background 的速记 css。

于 2013-07-23T18:37:28.753 回答