(一)IE8以下background不起作用

  最近遇到了些小bug,在这里做个记录分享下。低版本的浏览器不支持新属性或者说对代码的解析方式不一样,导致最后解析出来的结果五花八门,各种浏览器之间的兼容的确是一个令开发人员头疼的事情,不过有时候换一个思路去写也许能避免许多hack,不管是js hack还是css hack始终都是不推荐的,能避免则避免。

  先分享一篇别人总结的 css hack方式,比较齐全,感谢原博主。http://blog.csdn.net/freshlover/article/details/12132801

我的问题描述:background背景设置在IE8及以下显示不正常

这个也不算是啥bug,应该说是我自己写法不规范造成的。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>你还起作用吗</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10             background: #5ea593 url(2.jpg)0 0 no-repeat;
11         }
12     </style>
13 </head>
14 <body>
15     <div></div>
16 </body>
17 </html>

这样写的方式,注意:在url和0之间没有空格隔开,在ie9+是没有问题的,但是在ie8及以下是不正常的。开始这个问题困扰了我好久,不知道哪出了问题。后来找到原因了真是恨死自己了。

解决:background: #5ea593 url(2.jpg) 0 0 no-repeat;在url和0之间用空格隔开。

所以啊,以后写代码务必要规范!规范!不然有可能会花很多时间去做无用功。

时间: 2024-09-30 09:18:03

(一)IE8以下background不起作用的相关文章

网页重构中区分IE6、IE7、IE8及标准浏览器的最佳方法

由于万恶的IE6和IE7,我们在页面重构时不免要对其进行各种bug修复及差异化处理.在标准浏览器中可实现的效果在IE里却有各种离奇问题,例如IE6.IE7不能良好应对的inline-block和.clearfix问题,好在大部分问题已经有了足够的总结和途径.废话不多说,下面是一些方法区分浏览器的方法和我的看法. 主要途径 CSS Hack 直接在CSS文件中写CSS Hack是非常直观的区分方法.区分不同IE版本的hack代码为 #content{background:red; /* 所有浏览器

background 设置文本框背景图

background 属性的作用是给元素设置背景,它是一个复合属性,常用的子属性如下: background-color 指定元素的背景颜色. background-image 指定元素的背景图像. background-position 指定背景图像的位置,在复合属性中与 size 二选一. background-size 指定背景图片的尺寸,在复合属性中与 position 二选一. background-repeat 指定如何重复背景图像. 多数时候,我们都是给 div 等区块元素设置背景

对兼容ie浏览器所遇到的问题及总结

1,若直接给一个元素设置absolute定位.在浏览器缩放的时候.位置会错位.解决的方法是给外层的元素设置为relative定位. 2,低版本ie浏览器不支持placeholder属性 3,盒模型上规定了垂直边界重叠,若父元素有一个向上的margin值(10px),其子元素有一个向上的margin值(20px).重叠部分取大者.因此父元素和上一个div之间出现的是20px的空隙. 4,使用display:inline-block会导致元素之间有空隙,解决方法:父元素设置font-size:0或采

让IE和Firefox兼容的CSS技巧集合css hack

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不

gradient

线性渐变linear-gradient: 1.-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )2.-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法-webkit-gra

2015/12/14 - 对象赋值问题 与 IE8hack

今天在工作中发现以前没有注意到地方,那就是如果将一个对象通过赋值运算符"="赋值给另一个变量或对象时,那么作为接收值的变量或对象中保存的并不是这个对象的值或数据,而只是保存指向这个对象的this指针而已. 例如: var x = {'a':1} var y = x; // 变量y中保存的并不是对象x的内容,而是一个this指针,其源头任然是对象x 所以这样,一旦我们对变量y的内容进行了更改,那么作为源头的x对象也将发生变化. 1 var x = {'a':1} 2 var y = x;

关于word-break,word-wrap换行

目前项目中有一些流程日志需要动态显示到页面上,实现方法是ajax动态获取附加到<span></span>标签上,然后设置word-break:break-all样式使其自动换行,word-break允许词间换行,针对长字符串,当超出外层div时换行,但是在chrome下显示正常,在IE8下就不起作用了,应用网上说的word-wrap:break-word;overflow:hidden,还是不行,解决方法是把span标签换成p标签,这里p是块级元素,那么直接在span上加displ

Xamarin.Form 实例: Discuz BBS 客户端 源码分享

感谢台风, 这个十一长假让我好好的休息了一回, 睡觉到腰酸背疼, 看电影看到眼发红. 今天最后一天, 不敢出去逛, 不知道哪会还会下暴雨... 嗯嗯..这个项目其实在十一之前就开始了, 工作无聊,没有新任务, 我就搞起它. 至于为什么选 Discuz 的 BBS , 因为我常上的几个网站, 都有一堆的 APP , 官方的, 第三方的 . BBS 虽然已经没落了, 但是官方的 APP 居然用不了! 写这个东西之前, 本来想拿来看 1024 的, 但是 1024 要么不是最新版本, 要么禁用了 AP

opacity与rgba

opacity与rgba实现透明:opacity背景透明,子元素也透明,并且不能设置边框.文字透明特效:rgba所有涉及颜色的都可以设置透明 html: <ul> <li class="opacity opacity1">100%</li> <li class="opacity opacity2">80%</li> <li class="opacity opacity3">6