首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS背景url()没有出现在IE中,适用于FF/Safari

在IE浏览器中,CSS的url()可能会导致背景图片无法显示。这是因为IE浏览器对CSS的支持和其他现代浏览器(如Firefox、Safari)有所不同。为了解决这个问题,您可以尝试以下方法:

  1. 确保您的CSS语法正确,并且没有任何拼写错误。
  2. 使用绝对URL,而不是相对URL。
  3. 确保您的图片格式受IE支持。建议使用常见的图片格式,如JPEG或PNG。
  4. 检查您的DOCTYPE声明是否正确。IE可能需要正确的DOCTYPE来识别您的CSS代码。
  5. 使用条件注释为IE提供特定的CSS样式。例如:
代码语言:html
复制
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

在这个例子中,ie.css文件应该包含针对IE浏览器的特定样式。

如果您仍然遇到问题,请提供更多关于您的代码和尝试过的解决方案的详细信息,以便我们能够为您提供更具体的建议。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

第141天:前端开发浏览器兼容性问题总结(二)

ie如果td没有内容,那么border将不会显示 8. div嵌套p时,出现空白行 问题: div显示文本,ff、oprea、Chrome:top和bottom都会出现空白行,但是在...32. li的内容以省略号显示 问题: li内容超过长度时,想以省略号显示, 此方法适用于ie6-7-8、opera、safari浏览器  ff浏览器不支持 解决: li{width:200px;white-space...去除链接虚线边框的问题 问题: 当点击超链接后,ie6/7/8  ff会出现虚线边框 ,而opera、safari没有虚线边框 解决: ie6/7 设置为a {blr:expression_r(this.onFocus...=this.blur()) } ie8 和 ff 都不支持expression 在ie8 、ff设置为  :focus { outline: none; } 38. css滤镜的问题 问题:     ...IE6背景闪烁的问题 问题:        链接、按钮用CSS sprites作为背景,在ie6下会有背景图闪烁的现象。

1.9K21

CSS入门总结(下)

下面把CSS做一个梳理并主要介绍一下发生变化的模块内容: 选择器: CSS3对选择器做了更详细的划分: ? 背景和边框 1) 通过传统CSS创建一个带圆角的边框是很麻烦的。...我们需要通过设置一个背景图或在不同的角设置不同的图像等方式达到效果,在CSS3直接使用border-radius即可。border-radius: 5px; 2)box-shadow:用来添加阴影。...border-image:url(mengtu.png) 30 30 round; -webkit-border-image:url(mengtu.png) 30 30 round; /* Safari...5 and older */ -o-border-image:url(mengtu.png) 30 30 round; /* Opera */ 4)背景: background-image:background-image.../* Safari and Chrome */ } 3)scale()根据X及Y轴的参数,分别设置增大或减小多少: div{ -ms-transform: scale(2,3); /* IE 9 *

1K20

CSS技术入门

Margin 没有背景颜色,它是完全透明Border(边框) - 边框周围的填充和内容。边框是受到盒子的背景颜色影响Padding(内边距) - 清除内容周围的区域。...position定位Static 定位HTML 元素的默认值,即没有定位,元素出现在正常的流。静态定位的元素不会受到 top, bottom, left, right 影响。...:url(border.png) 30 30 round; /* Opera */背景属性CSS3可以通过background-image属性添加背景图片。...不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。background-image: url(img_flwr.gif), url(paper.gif);同时显示多张图片。...background-size指定背景图像的大小。CSS3以前,背景图像大小由图像的实际大小决定。CSS3可以指定背景图片,让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。

2.8K61

完美的背景图全屏css代码 – background-size:cover?

以图片bg.jpg为例 最简单,最高效的方法 CSS3.0 归功于css3.0新增的一个属性background-size,可以简单的实现这个效果,这里用fixed和center定位背景图,然后用background-size...来使图片铺满,具体css如下 html {   background: url(bg.jpg) no-repeat center center fixed;   -webkit-background-size...Safari 3+ Chrome IE 9+ Opera 10+ (Opera 9.5 支持background-size属性 但是不支持cover) Firefox 3.6+ 这里你会发现ie8及以下版本不支持.../ Chrome / Opera / Firefox IE7+ 其实我自己一般用的是(因为够用了,咱不挑/其实上面的都是俺翻译过来的) html部分 css...(bg.jpg) no-repeat #000;     background-size: cover;     z-index: -1; } 如果图片宽度没有达到1900px以上,我会加上ie的滤镜来支持

6.4K40

CSS-各种cs样式之浏览器兼容处理方式汇总大全(更新...)

链接背景图: .bgpic{ background: url(.....说说ie下浮动后错位导致和正常浏览器观看效果不一致的现象吧: 经过仔细观察,是因为清楚浮动在ie没有效果的原因, 我把内部浮动元素删掉以后,外表的框就可以被撑起来了,效果也就和普通浏览器没有区别了。...但是以后,ie不能定死高度的情况下怎么办? 看来是我清楚浮动的类clearfix的内部代码没有写兼容处理的原因啊。...常见兼容问题: 1、DOCTYPE 影响 CSS 处理 2、FF:div 设置 margin-left, margin-right 为 auto 时已经居中,IE 不行 3、FF: body 设置 text-align...缺点是要控制内容不要换行 7、cursor: pointer 可以同时在 IE FF 显示游标手指状, hand 仅 IE 可以 8、FF: 链接加边框和背景色,需设置 display: block,

1.6K50

最全的CSS浏览器兼容整理

FORM标签 这个标签在IE,将会自动margin一些边距,而在FFmargin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式...M$ IE.其实对于css的标准支持方面,IE没有我们想象的那么可恶,关键在于IEFF的默认值不一样而已,掌握了这个技巧,你会发现写出兼容FFIEcss并不是那么困难,或许对于简单的css,你完全可以不用...我们都知道,浏览器在显示网页的时候,都会根据网页的 css样式表来决定如何显示,但是我们在样式表未必会将所有的元素都进行了具体的描述,当然也没有必要那么做,所以对于那些没有描述的属性,浏览器将采 用内置默认的方式来进行显示...,譬如文字,如果你没有css中指定颜色,那么浏览器将采用黑色或者系统颜色来显示,div或者其他元素的背景,如果在 css没有被指定,浏览器则将其设置为白色或者透明,等等其他未定义的样式均如此。...所以有很多东西出现FFIE显示不一样的根本原因在于它们的默认显 示不一样,而这个默认样式该如何显示我知道在w3没有对应的标准来进行规定,因此对于这点也就别去怪罪IE了。

1.5K31

Web程序员们,你准备好迎接HTML5了吗?

缺点是要控制内容不要换行   7.cursor: pointer 可以同时在 IE FF 显示游标手指状, hand 仅 IE 可以    8.FF: 链接加边框和背景色,需设置 display: block...FORM标签   这个标签在IE,将会自动margin一些边距,而在FFmargin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式...M$ IE.其实对于css的标准支持方面,IE没有我们想象的那么可恶,关键在于IEFF的默认值不一样而已,掌握了这个技巧,你会发现写出兼容FFIEcss并不是那么困难,或许对于简单的css,你完全可以不用...,譬如文字,如果你没有css中指定颜色,那么浏览器将采用黑色或者系统颜色来显示,div或者其他元素的背景,如果在 css没有被指定,浏览器则将其设置为白色或者透明,等等其他未定义的样式均如此。...所以有很多东西出现FFIE显示不一样的根本原因在于它们的默认显示不一样,而这个默认样式该如何显示我知道在w3没有对应的标准来进行规定,因此对于这点也就别去怪罪IE了。

77220

网页设计另人头疼的浏览器兼容问题

缺点是要控制内容不要换行   7.cursor: pointer 可以同时在 IE FF 显示游标手指状, hand 仅 IE 可以    8.FF: 链接加边框和背景色,需设置 display: block...FORM标签   这个标签在IE,将会自动margin一些边距,而在FFmargin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式...M$ IE.其实对于css的标准支持方面,IE没有我们想象的那么可恶,关键在于IEFF的默认值不一样而已,掌握了这个技巧,你会发现写出兼容FFIEcss并不是那么困难,或许对于简单的css,你完全可以不用...,譬如文字,如果你没有css中指定颜色,那么浏览器将采用黑色或者系统颜色来显示,div或者其他元素的背景,如果在 css没有被指定,浏览器则将其设置为白色或者透明,等等其他未定义的样式均如此。...所以有很多东西出现FFIE显示不一样的根本原因在于它们的默认显示不一样,而这个默认样式该如何显示我知道在w3没有对应的标准来进行规定,因此对于这点也就别去怪罪IE了。

1.4K20

JS魔法堂:Data URI Scheme介绍

来设置;FF就两种方式均可。  ...,css代码,示例: * 注意:下列方式是无法设置background-image:url()样式的 */ <link rel="stylesheet" type="text/<em>css</em>" href="...支持   Opera 7.2+ data URI 必须小于4100字符   <em>IE</em>8+ data URI必须小于32k(<em>IE</em>8不支持js的data URI)   Chrome、<em>FF</em>和<em>Safari</em>无限制...不支持   <em>IE</em>567 八、标签支持                               嵌入图片的object、img、input[type=image]、script、link和<em>css</em>规则<em>中</em>的...在使用<em>IE</em>8兼容模式时能认识*这个<em>css</em> hack,但却不支持mhtml,所以会导致<em>背景</em>图片失效。

2.2K70

位图和SVG用法比较

当我们需要引用其中一个图标时,我们可以使用以下这段 CSS 代码来显示图片: #print { width: 24px; height: 24px; background: url...("sprite.png") -168px 0; } SVG 使用方法 SVG同样可以把多个图像集成到一个文件。...添加哈希值来指定目标对象,如sprite.xml#circle ,我们就可以仅显示圆形所在图层。...我们可以通过很多途径添加 SVG文件,如Object、iframe、img标签或者是作为CSS背景添加(Chrome、Safari和Opera 15+都不支持以img标签或者CSS背景添加形式添加SVG...尽管SVG具有可扩展、易交互并且节省网 络资源等诸多优势,SVG还是没有在Web项目中被广泛应用。这是什么原因呢? SVG 不支持早期的 IE 浏览器 -仅支持IE9及更高版本。

2.9K60

为什么大家都用i标签用作小图标?

简短的解释是,对于这两种语法没有什么不同,仅仅一点的不同是,伪元素(双冒号),css3的伪类是(单冒号) 最后就语法而言。...你基本上有属性的值要包含什么的两个额外的选择 首先,你可以包含一个指向一个图像的URL,就像在css里包含一个背景图像一样做你能做的 p:before { content: url(image.jpg)...当然,你可以包含一个Data URI代替图像引用,正如你可以用css背景一样。 你还可以选择attr(X)的函数的形式。...图像,这是void(或者是空元素),没有子元素,所以它在这个列子不可用,同样也适用于其他空元素,例如:。 可怕的浏览器兼容性 任何前端技术的发展势头,第一个问题就是浏览器的支持。...所以,如果你的支持者具有较高的IE版本,你仍然可以在某种程度上使用它们。 一些提醒 正如前面提到的,伪元素不会出现在DOM。这些元素不是真正的元素。因此,它们不是可用的。

1.8K51

css多浏览常见问题

而hand 只适用于 IE. 1 针对firefox ie6 ie7的css样式 现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示, 但是ie7对!...六、CSS兼容要点分析IE vs FF CSS 兼容要点: DOCTYPE 影响 CSS 处理 FF: div 设置 margin-left, margin-right 为 auto 时已经居中,...缺点是要控制内容不要换行 cursor: pointer 可以同时在 IE FF 显示游标手指状, hand 仅 IE 可以 FF: 链接加边框和背景色,需设置 display: block, 同时设置...这里,图片会当作背景显示出来,而真正的文字由于设定了-2000像素这个缩进,它们会出现在屏幕左边2000点的地方,就看不见了。但这对于关闭图片的人来说,可能全部看不到了,这点要注意。...10、直通到屏幕底部的背景色 在垂直方向是进行控制是CSS所不能的。

1K30

第161天:CSS3实现兼容性的渐变背景(gradient)效果

CSS实现兼容性的渐变背景(gradient)效果 一、有点俗态的开场白 在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果。...二、IE浏览器下的渐变背景 IE浏览器下渐变背景的使用需要使用IE的渐变滤镜。...Firefox或是Safari浏览器下的css-gradient背景渐变的用法类似。...四、chrome/Safari浏览器下的渐变背景实现 对于webkit核心的浏览器,如Chrome/Safari浏览器下渐变背景的实现也是使用CSS3 渐变方法,css-gradient,具体为-webkit-gradient...CSS渐变背景的实现可以有效降低网页的图片数,也就是降低了HTTP请求,是非常受用的。但是IE浏览器一直蹲在茅厕边啃鸡腿——自以为美味,得使用资源消耗很高的滤镜才能实现渐变效果。

1.3K30
领券