网页兼容性

全兼容 渐变效果 头颜色#F3A8A8 尾颜色#e23b2e

background: #F3A8A8; /* Old browsers */

background: -moz-linear-gradient(top,#F3A8A8,#e23b2e);/*FF 3.6+ */

background: -webkit-gradient(linear,left top,left bottom, color-stop(0, #F3A8A8), color-stop(1, #e23b2e));/* Chrome,Safari4+ */

background: -webkit-gradient(linear,left top,left bottom,from(#F3A8A8), to(#e23b2e));

filter:alpha(opacity=100 finishopacity=100 style=1 startX=startX,startY=startY,finishX=finishX,finishY=finishY)

progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#F3A8A8‘, endColorstr=‘#e23b2e‘,GradientType=1 ); /* IE6-9 */

background: -ms-linear-gradient(top, #F3A8A8 0%,#e23b2e 100%); /* IE10+ 0%表示从头开始 100% 表示结束*/

全兼容 border-radius

-moz-border-radius: /*FF*/

-webkit-border-radius:/*Chrome,Safari*/

-ms-border-radius:

border-top-left-radius: /*0p IE9左上角 */

border-top-right-radius: /*0p IE9右上角 */

border-bottom-right-radius: /*0p IE9右下角*/

border-bottom-left-radius: /*0p IE9左下角*/

在根目录下放文件pie.htc文件

behavior: url(pie.htc);

全兼容 box-shadow

box-shadow: 0 0 0 10px rgba(255,255,255,0.1);

-wibkit-box-shadow: 0 0 0 10px rgba(255,255,255,0.1);

-moz-box-shadow: 0 0 0 10px rgba(255,255,255,0.1);

-ms-box-shadow: 0 0 0 10px rgba(255,255,255,0.1);

在根目录下放文件pie.htc文件

behavior: url(pie.htc)

由于某种原因,您无法修改服务器配置(例如公用主机,或是空间服务商提供的服务器),您可以用一个PHP文件来间接调用htc文件。

<?php  header( ‘Content-type: text/x-component‘ );  include( ‘pie.htc‘ );  ?>

通过PHP文件来增加一个含有“text/x-component”字样的Content-type头,同时调用pie.htc文件。需要将pie.php和pie.htc放在同一个文件夹目录下,同时CSS中的behavior写法应该是:

behavior: url(pie.php);

另补充
IE8不支持 input[type=text] 这种写法

时间: 2024-09-04 18:56:57

网页兼容性的相关文章

网页兼容性调试

网页兼容性调试-流程 写作规范高质量的代码出兼容性问题的可能性较小.所以出了问题要考虑是否代码结构不规范 兼容性问题两大原因:不同分辨率下的兼容性调试不同浏览器下的兼容性调试 显示器分辨率和浏览器市场份额http://tongji.baidu.com/data/browser QQ同时在线人数和分布http://im.qq.com/online/index.shtml 浏览器分类 国际品牌浏览器IE:ie6 7 8 9 10 11chromfirefoxsafariopera 国产山寨牌浏览器3

DIV+CSS 网页兼容性问题(IE6 IE7 IE8 IE9 火狐 chorm)

本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧,供大家参考. CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 http://www.php100.com 2. margin加倍的问题 设置为float的

各类网页兼容性及解决

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题.在学习浏览器兼容性之前,我想把前端开发人员划分为两类:第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都是浏览器的b

网页制作之html基础学习6-CSS浏览器兼容问题

初学html和css时,每天切图,总会遇到很多浏览器兼容性问题.最近一直关注移动平台开发,就html和css来说,不用考虑那么多浏览器兼容性问题.到现在,以至于很多浏览器兼容性几乎忘光了.今天把以前总结的知识拿来分享一下,顺便自己也复习一下.当然,其中肯定有很多不足,望指正啊. 1 ie6.0横向margin加倍 产生因素:块属性.float.有横向margin. 解决方法:display:inline: 2 ie6.0下默认有行高 解决方法:overflow:hidden;或font-size

使用PSD设计网页页面

一.一个独立的页面 1.分析这个页面,在脑海或草稿上要确立页面板块布局(如版块区域的,位置和大小)2.根据设计稿的的情况,分析背景图的分布.ICO图的分布等 3.切割相应的图片,导出.合并图片(一般用ps 切割设计师提供的PSD图)4.在编辑器中写整体结构XHTML代码,包括页面中出现的所有元素的结构 5.编写CSS样式中的整体以及模块代码 6.细节调整7.浏览器验证网页兼容性,是否正确显示二.由多个页面组成的小站点或者大站点 1.浏览所有设计稿,统一规划站点模块.图片.文件分布2.开始第一点的

css样式(火狐的兼容性问题)

1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 wid

Web浏览器兼容性测试工具如何选择

对于前端开发工程师来说,网页兼容性测试工程师而言,确保代码在各种主流浏览器的各个版本中都能正常工作是件很费时的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,领测软件测试网向您推荐12款很棒的浏览器兼容性测试工具让我们一起看看这些很棒的工具吧. Spoon Browser Sandbox 点击你需要测试的浏览器环境,安装插件就可以进行测试了.帮助你测试网页在Safari.Chrome.Firefox和Opera浏览器中是否正常,IE以前也有的,网站上说应微软的要求去掉了. Super

Internet Explorer已限制此网页运行可以访问计算机的脚本或ActiveX控件

在制作网页的时候,大家不免要用到script,也即是脚本,主要是VBScript以及JavaScript.那么时常遇到这样的情况: 在本地双击打开html文件时,如果是IE的话,会出现提示框(如下图): 造成这种困扰的原因:IE保护机制,默认安全级别较高,当然可以修改自己的IE浏览器来解决. 方法:打开IE——工具——Internet选项——高级标签——安全——勾选“允许活动内容在我的计算机上的文件中运行” 以下情况不会发生这种现象: 1,使用360浏览器.遨游浏览器.搜狗浏览器等浏览器浏览.

如何写出兼容性很好的页面

写出好的页面前首先你要把HTML4与HTML5学会了,然后CSS,CSS3也有一定的掌握. 通常情况下,不同类型的网站都去认认真真的排版后,对前端就有一定的掌握程度,对写静态页面问题就不大了.至于个数嘛,3个完整网站以上. 提醒:如果要写出非常好的页面,js是必不可少的,这对初学前端的人来说,就有点难度了,但也别胆怯,按照学习的先后进度来学习,先学HTML+CSS,再学习HTML5+CSS3,学到一定程序后,再去接触javascript,我相信就算是自学,HTML+CSS 2个月左右,javas