`
紫竹星云
  • 浏览: 29990 次
社区版块
存档分类
最新评论

Firefox不支持background-position语法

 
阅读更多
firefox不支持background-position-x,background-position-y

今天又学了一招,firefox不支持background-position-x,background-position-y

例如:

background-position-x:30px;

background-position-y:5px;

需要改成:

background-position:30px 5px;

烈火网友情提示:

对背景进行定位时,直接写在background后面就可以了。如

background:url(../images/hbv_birth_06.jpg) no-repeat 30px 5px;


今天写了一段CSS样式,内容如下:
.delete_icon{
  background:url(../img/icons.gif) 0 -22 no-repeat;
}
该样式应用于一个TD中,运行时在IE和Chrome浏览器下都是正常的,但是FF下无法显示出背景图片,多次试验后估计是图片定位的问题,也就是“background:url(../img/icons.gif) 0 -22 no-repeat;”标红部分,改为“0 -22px”后就正常显示了,可能是FF下定位时默认的单位不同所致(可能默认为%了)。
分享到:
评论

相关推荐

    CSS3之多背景background使用示例

    CSS3的多背景功能在现代浏览器中得到了广泛支持,包括Chrome、Firefox、Safari、Opera以及IE9及以上版本。对于不支持CSS3的旧版浏览器,多背景属性将被忽略,但不会影响到其他CSS2样式的表现。 ### 三、背景的实例 ...

    认识CSS3和HTML5.doc

    - `-moz-`:针对基于Mozilla Gecko引擎的浏览器,如Firefox。 - `-webkit-`:针对基于WebKit引擎的浏览器,如Safari和Chrome。 - `-khtml-`:针对基于KHTML引擎的浏览器,如Konqueror。 随着技术的发展,主流浏览器...

    div层实现IE Firefox 页面半透明遮罩效果弹窗

    本文将深入探讨如何使用CSS来实现在Internet Explorer(IE)和Firefox等浏览器上的半透明遮罩层效果。 首先,我们需要了解CSS中的`opacity`属性,它是实现半透明效果的关键。`opacity`属性用于设置元素的不透明度,...

    DIV框渐变填充实现源代码

    /* Firefox */ background-image: -o-linear-gradient(to right, blue, white); /* Opera */ background-image: linear-gradient(to right, blue, white); /* 标准语法 */ } ``` 在提供的`DIV框渐变填充实现方法...

    入门教程 CSS属性.pdf

    - Firefox (F): 1 - Netscape (N): 6 - W3C: 1 **1.3 `background-attachment` - 背景图片定位** - **描述**: 此属性决定了背景图片是随页面滚动还是固定不动。 - **值**: - `scroll`: 默认值,背景图片会随...

    Li list-style-image 图片垂直居中

    在 Firefox 中,可以将此值设置为 `50%` 来实现居中,因为Firefox会基于图像的中心点定位。然而,IE 对于背景图像的位置计算略有不同,因此可能需要调整为 `45%` 或其他值来达到类似的效果。 由于 IE 和 Firefox 对...

    css2.0语法手册

    例如,IE6对一些属性的支持有限,而Firefox、Chrome等现代浏览器则对CSS2.0的实现较为完整。开发者需借助工具如Can I Use来检查各浏览器的兼容性,以确保样式在不同平台上的一致性。 **九、CSS2.0的CHM格式文件** `...

    css浏览器兼容整理

    - Firefox和其他现代浏览器可能不支持直接调用`.click()`方法来触发链接。可以使用其他事件监听器来代替。 12. **目前FF2.0为止都不支持IE的name锚点** - Firefox在早期版本中可能不支持某些特定的HTML特性。...

    Div+CSS规则整理

    - 针对不同浏览器的差异,如IE与Firefox、Chrome等,需要编写兼容性代码,如使用`-webkit-`、`-moz-`、`-ms-`、`-o-`前缀。 - 使用`*{box-sizing:border-box;}`可以使所有元素的边框和内填充包含在元素总尺寸内,...

    HTML5七夕情人节表白网页制作【飘落蒲公英动画超酷炫的HTML5页面】HTML+CSS+JavaScript

    当前主流浏览器(如Chrome、Firefox、Safari等)均支持HTML5及其相关API,因此兼容性问题不大。 ### 知识点三:代码展示与解析 #### 1. HTML代码片段 ```html <!DOCTYPE ...

    Css复习题 (2).pdf

    - 不同浏览器对默认样式处理可能不同,如IE和Firefox的页边距和列表缩进设置。 7. **CSS Bug的原因**: - 浏览器间实现CSS的差异导致表现层不统一。 - 各大浏览器开发商的实现方式和代码基础不同。 - 为保护...

    Firefox专属hack的写法介绍

    本文主要关注的是Firefox浏览器的专属hack,解决Firefox中的一些特定问题,尤其是针对Firefox不支持`input`元素的`line-height`属性这一bug。 首先,我们需要理解`line-height`属性的重要性。`line-height`用于设置...

    纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)

    同时,为了提供不支持渐变的浏览器的回退方案,可以设置一个基础背景色。 例如,一个全面兼容的线性渐变示例: ```css background-color: #063053; /* 回退方案 */ background-image: -webkit-linear-gradient(#...

    css32实用PPT学习教案.pptx

    Firefox目前仅支持关键词。 3. **多背景 (Multiple Backgrounds)** CSS3允许在同一个元素上设置多个背景,背景之间用逗号分隔,如`background: url(a.jpg) 0 0, url(b.jpg) 0 100%;`。背景尺寸可通过`background-...

    css3背景图片透明叠加属性cross-fade简介及用法实例

    对于Internet Explorer 10和Firefox,它们是否支持`cross-fade`还不清楚。由于这个限制,`cross-fade`在实际项目中的应用受到了很大的限制,开发者通常需要寻找替代方案,如使用JavaScript库或图片合成技术来实现...

    常用的CSS缩写语法小结可帮助你减少CSS文件大小

    在某些情况下,如Firefox,如果只提供 `font-weight`, `font-size` 和 `line-height`,而没有指定 `font-family`,则可能不会按预期工作,需要添加默认字体。 总之,熟练掌握CSS缩写语法对于编写高效、精简的CSS...

    详解css粘性定位position:sticky问题采坑

    使用`position: sticky`的正确语法是给元素设置`position: sticky`并配合`top`, `bottom`, `right`, 或 `left`中的一个属性。例如: ```css #sticky-nav { position: sticky; top: 100px; } ``` 使用`position: ...

    css兼容性问题总结笔记

    - **FireFox**: 不支持任何Hack。 - **IE9**: 支持 `\9` (后面紧跟) 和 `\0` (后面紧跟)。 - **IE8**: 支持 `\9` (后面紧跟)、`\0` (后面紧跟) 和 `\0/0` (后面紧跟)。 - **IE7**: 支持 `*`、`+` 和 `_`。 - **IE6**...

    css的未来技术 css测试技术

    与之相关的属性还有`-webkit-mask-clip`、`-webkit-mask-position`和`-webkit-mask-repeat`等,它们的语法与`background`属性相似。例如,以下代码分别展示了使用图片和渐变作为蒙版的例子: ```css .element { ...

    浅析JavaScript中的CSS属性及命名规范

    - `float`: `cssFloat` (Firefox) 或 `style.float` (IE) - `margin`: `margin` - `margin-bottom`: `marginBottom` - `margin-left`: `marginLeft` - `margin-right`: `marginRight` - `margin-top`: `...

Global site tag (gtag.js) - Google Analytics