Question

当网站在LOCALHOST上时，此css样式在所有浏览器上都能正常运行。但是当我将网站上传到实时服务器时，它也适用于除IE之外的所有浏览器。

背景图片不显示。

.button {
font-family:Arial, Helvetica, sans-serif;
display:inline-block;
position:relative;
background:url(../images/button-bg.gif) 0 0 repeat-x #3b3d3e;
border:1px solid #3b3d3e;
font-size:11px;
color:#fff;
font-weight:bold;
text-decoration:none;
padding:1px 9px;
margin-right:7px;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
behavior:url(js/PIE.htc);
 }

注意：正如您所看到的，我使用背景颜色＃3b3d3e，当页面加载时，我会看到这种颜色的一部分时间，然后它就会消失。

这有什么问题？

Answer 1

我认为背景应按此顺序写出：背景：颜色位置大小重复原点剪辑附件图像; 也许IE是唯一关心的浏览器？

如果不起作用，可以尝试单独添加所需的每个背景值：背景颜色，背景位置，背景大小，背景重复，背景原点，背景剪辑，背景附件和背景图像。

另外作为旁注，您可能想尝试在css“behavior：url（js / PIE.htc）”中注释掉最后一行。我知道有时候这些事情会与其他财产发生冲突。我自己从未使用过PIE，但值得一试。

Answer 2

先着色：

background: #3b3d3e url(../images/button-bg.gif) 0 0 repeat-x;

Answer 3

尝试将zoom:1添加到.button

这会触发IE7上的hasLayout属性。详细说明如下： On having Layout

Answer 4

我想我修好了但仍然不知道是什么原因...... 我删除了

 behavior:url(js/PIE.htc);

从它，它完美地工作......

我很确定文件PIE.htc在那里，但我不知道出了什么问题。任何人??

Answer 5

我还没有在我的网站上尝试过这个，因为服务器已关闭，但可能值得研究一下Modernizr http://modernizr.com/

我很难将背景图像显示从本地移动到我的服务器，而我最终要做的就是使用图像的完整路径。

如果它确实是浏览器冲突问题，这应该有助于解决它。

另外，您是否尝试过评论behavior:url(js/PIE.htc);？这可能是适合它的原因。

当我在CSS中添加背景图片时，我会这样输入：

background-image: url("path/to/image.img"); background-repeat:no-repeat;

background-color:#color;

我看到你试过这个，我试着考虑几个选项，使用Z-index影响你想要做什么？

让Modernizr了解一下

Answer 6

它可能是localhost和服务器环境之间的相对路径问题。请参阅CSS 3 PIE已知问题页面上的详细说明。 http://css3pie.com/documentation/known-issues/#relative-paths

PIE工作了吗？ - IE 7上的按钮上有圆角吗？

这也可能有所帮助。 http://css3pie.com/documentation/known-issues/#z-index

css background-image在IE上不起作用？

6 个答案: