css repeat-y 在 IE8 中不起作用答案

【问题标题】：css repeat-y not working in IE8css repeat-y 在 IE8 中不起作用
【发布时间】：2013-07-23 17:45:44
【问题描述】：

我正在使用一个 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 中解决这个问题。

任何帮助将不胜感激。

提前致谢。

问候，拉胡尔·拉蒂

【问题讨论】：

在 IE8 中工作得很好（不是后来的 IE8 模式下的 IE），尽管发现了错误 feitla。您确实尝试将一些内容放入 div 中，不是吗？

标签： css background-repeat

【解决方案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 为空，请确保它实际上具有设置的高度/宽度。

【讨论】：

【解决方案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。

【讨论】：