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的多背景功能在现代浏览器中得到了广泛支持,包括Chrome、Firefox、Safari、Opera以及IE9及以上版本。对于不支持CSS3的旧版浏览器,多背景属性将被忽略,但不会影响到其他CSS2样式的表现。 ### 三、背景的实例 ...
- `-moz-`:针对基于Mozilla Gecko引擎的浏览器,如Firefox。 - `-webkit-`:针对基于WebKit引擎的浏览器,如Safari和Chrome。 - `-khtml-`:针对基于KHTML引擎的浏览器,如Konqueror。 随着技术的发展,主流浏览器...
本文将深入探讨如何使用CSS来实现在Internet Explorer(IE)和Firefox等浏览器上的半透明遮罩层效果。 首先,我们需要了解CSS中的`opacity`属性,它是实现半透明效果的关键。`opacity`属性用于设置元素的不透明度,...
/* Firefox */ background-image: -o-linear-gradient(to right, blue, white); /* Opera */ background-image: linear-gradient(to right, blue, white); /* 标准语法 */ } ``` 在提供的`DIV框渐变填充实现方法...
- Firefox (F): 1 - Netscape (N): 6 - W3C: 1 **1.3 `background-attachment` - 背景图片定位** - **描述**: 此属性决定了背景图片是随页面滚动还是固定不动。 - **值**: - `scroll`: 默认值,背景图片会随...
在 Firefox 中,可以将此值设置为 `50%` 来实现居中,因为Firefox会基于图像的中心点定位。然而,IE 对于背景图像的位置计算略有不同,因此可能需要调整为 `45%` 或其他值来达到类似的效果。 由于 IE 和 Firefox 对...
例如,IE6对一些属性的支持有限,而Firefox、Chrome等现代浏览器则对CSS2.0的实现较为完整。开发者需借助工具如Can I Use来检查各浏览器的兼容性,以确保样式在不同平台上的一致性。 **九、CSS2.0的CHM格式文件** `...
- Firefox和其他现代浏览器可能不支持直接调用`.click()`方法来触发链接。可以使用其他事件监听器来代替。 12. **目前FF2.0为止都不支持IE的name锚点** - Firefox在早期版本中可能不支持某些特定的HTML特性。...
- 针对不同浏览器的差异,如IE与Firefox、Chrome等,需要编写兼容性代码,如使用`-webkit-`、`-moz-`、`-ms-`、`-o-`前缀。 - 使用`*{box-sizing:border-box;}`可以使所有元素的边框和内填充包含在元素总尺寸内,...
当前主流浏览器(如Chrome、Firefox、Safari等)均支持HTML5及其相关API,因此兼容性问题不大。 ### 知识点三:代码展示与解析 #### 1. HTML代码片段 ```html <!DOCTYPE ...
- 不同浏览器对默认样式处理可能不同,如IE和Firefox的页边距和列表缩进设置。 7. **CSS Bug的原因**: - 浏览器间实现CSS的差异导致表现层不统一。 - 各大浏览器开发商的实现方式和代码基础不同。 - 为保护...
本文主要关注的是Firefox浏览器的专属hack,解决Firefox中的一些特定问题,尤其是针对Firefox不支持`input`元素的`line-height`属性这一bug。 首先,我们需要理解`line-height`属性的重要性。`line-height`用于设置...
同时,为了提供不支持渐变的浏览器的回退方案,可以设置一个基础背景色。 例如,一个全面兼容的线性渐变示例: ```css background-color: #063053; /* 回退方案 */ background-image: -webkit-linear-gradient(#...
Firefox目前仅支持关键词。 3. **多背景 (Multiple Backgrounds)** CSS3允许在同一个元素上设置多个背景,背景之间用逗号分隔,如`background: url(a.jpg) 0 0, url(b.jpg) 0 100%;`。背景尺寸可通过`background-...
对于Internet Explorer 10和Firefox,它们是否支持`cross-fade`还不清楚。由于这个限制,`cross-fade`在实际项目中的应用受到了很大的限制,开发者通常需要寻找替代方案,如使用JavaScript库或图片合成技术来实现...
在某些情况下,如Firefox,如果只提供 `font-weight`, `font-size` 和 `line-height`,而没有指定 `font-family`,则可能不会按预期工作,需要添加默认字体。 总之,熟练掌握CSS缩写语法对于编写高效、精简的CSS...
使用`position: sticky`的正确语法是给元素设置`position: sticky`并配合`top`, `bottom`, `right`, 或 `left`中的一个属性。例如: ```css #sticky-nav { position: sticky; top: 100px; } ``` 使用`position: ...
- **FireFox**: 不支持任何Hack。 - **IE9**: 支持 `\9` (后面紧跟) 和 `\0` (后面紧跟)。 - **IE8**: 支持 `\9` (后面紧跟)、`\0` (后面紧跟) 和 `\0/0` (后面紧跟)。 - **IE7**: 支持 `*`、`+` 和 `_`。 - **IE6**...
与之相关的属性还有`-webkit-mask-clip`、`-webkit-mask-position`和`-webkit-mask-repeat`等,它们的语法与`background`属性相似。例如,以下代码分别展示了使用图片和渐变作为蒙版的例子: ```css .element { ...
- `float`: `cssFloat` (Firefox) 或 `style.float` (IE) - `margin`: `margin` - `margin-bottom`: `marginBottom` - `margin-left`: `marginLeft` - `margin-right`: `marginRight` - `margin-top`: `...