[英]css background-image doesn't work on IE?
This css style is working perfectly on all browsers when the site is on LOCALHOST. 当站点位于LOCALHOST上时,此CSS样式可在所有浏览器上完美运行。 but when I uploaded the site to a live server, It also works on all browsers except IE.
但是当我将网站上传到实时服务器时,它也可以在除IE之外的所有浏览器上使用。
The background-image don't show. 背景图像不显示。
.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);
}
NOTE: as you can see I use the color #3b3d3e with the background, and when the page loads I see this color for a part of a second, and then it disappears. 注意:如您所见,我在背景上使用#3b3d3e颜色,当页面加载时,我看到此颜色一秒钟,然后消失了。
what is wrong with this? 这有什么问题?
I believe background should be written out in this order: background: color position size repeat origin clip attachment image; 我相信背景应该按以下顺序写出:背景:颜色位置大小重复原点剪辑附件图像; Maybe IE is the only browser that cares?
也许IE是唯一关心的浏览器?
If that doesn't work maybe try adding each background value you need seperately: background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-image. 如果这样不起作用,则可以尝试分别添加您需要的每个背景值:背景颜色,背景位置,背景大小,背景重复,背景来源,背景剪辑,背景附件和背景图像。
Also as a side note you might want to try commenting out the last line in the css "behavior:url(js/PIE.htc)". 另外,您还可以尝试注释掉CSS的最后一行“ behavior:url(js / PIE.htc)”。 I know sometimes these things like to conflict with other properties.
我知道有时这些事情会与其他属性发生冲突。 I have never used PIE myself, but its worth a shot commenting out.
我自己从未使用过PIE,但值得一提。
颜色优先:
background: #3b3d3e url(../images/button-bg.gif) 0 0 repeat-x;
Try adding zoom:1
to .button 尝试将
zoom:1
添加到.button
This triggers the hasLayout property on IE7. 这将触发IE7上的hasLayout属性。 Detailed explanation here: On having Layout
详细说明在这里: 关于布局
I think I got it fixed but still don't know what is the reason... I removed the 我想我已解决问题,但仍然不知道是什么原因...我删除了
behavior:url(js/PIE.htc);
from it, and it worked perfectly... 从它,它完美地工作...
I'm pretty sure that the file PIE.htc is there but I don't know what is wrong. 我很确定文件PIE.htc在那里,但是我不知道出了什么问题。 anyone??
任何人??
I haven't tried this on my site yet, because the server has been down but it might be worth looking into Modernizr http://modernizr.com/ 我尚未在我的网站上尝试过此操作,因为服务器已关闭,但可能值得研究Modernizr http://modernizr.com/
I had a hard time getting background images to show moving from local to my server, and what I ended up having to do was use the full path of the image. 我很难获取背景图像以显示从本地到服务器的移动,而最终要做的就是使用图像的完整路径。
If it is infact a browser confliction problem, this should help solve it. 如果实际上是浏览器冲突问题,则应该可以解决。
Also, have you tried commenting out behavior:url(js/PIE.htc);
另外,您是否尝试过注释
behavior:url(js/PIE.htc);
? ? This could be what's giving it fits.
这可能就是适合的原因。
When i put a background-image in my CSS, I type it like so: 当我在CSS中放置背景图片时,我会这样输入:
background-image: url("path/to/image.img"); background-repeat:no-repeat;
background-color:#color;
I see you tried this, and I'm trying to think of several options, would working with the Z-index affect what you are trying to do? 我看到您尝试过此方法,并且正在尝试考虑几种选择,使用Z-index是否会影响您要尝试执行的操作?
Give Modernizr a look over 让Modernizr看一看
It may be a relative path issue between localhost and server environment. 这可能是本地主机和服务器环境之间的相对路径问题。 See the detailed explanation on the CSS 3 PIE known issues page.
请参阅CSS 3 PIE已知问题页面上的详细说明。 http://css3pie.com/documentation/known-issues/#relative-paths
http://css3pie.com/documentation/known-issues/#relative-paths
Was PIE working at all? PIE确实在工作吗? — Were there rounded corners on the button on IE 7?
— IE 7的按钮上是否有圆角?
This may be helpful too. 这也可能会有所帮助。 http://css3pie.com/documentation/known-issues/#z-index
http://css3pie.com/documentation/known-issues/#z-index
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.