精华内容
下载资源
问答
  • 解决兼容性

    2019-11-10 17:05:31
    如何解决兼容性: 1、重置文件 2、HTML文件的第一行代码为: 和不都不是错误 如果不,则进行怪异模式,浏览器会以低版本进行解析。 注:低版本解析时碰到新的标签,虽然不识别新标签,但标签的内容会依然...

    兼容性 :相同HTML标签(布局),不同的浏览器上展示效果一致。

    如何解决兼容性:
    1、重置文件

    2、HTML文件的第一行代码为:
    写和不写都不是错误
    如果不写,则进行怪异模式,浏览器会以低版本进行解析。
    注:低版本解析时碰到新的标签,虽然不识别新标签,但标签的内容会依然展示到页面中。

    3、设计理念(开发思维)
    根据不同的用户群体:
    a:渐进增强:
    先针对低版本浏览器进行开发,保证页面核心内容的展示
    再针对高版本浏览器进行效果、交互、样式的添加
    为客户提供更好的用户体验
    b:优雅降级:
    先针对高版本浏览器进行开发,构建一个完整的页面(交互功能)
    再针对低版本浏览器进行功能的删减。

    4、每个浏览器都有自己独立的内核。因此,CSS属性名前需要加前缀。

    公司 浏览器 内核 前缀
    谷歌 Chrome WebKit -webkit-
    火狐 Firefox Gecko -moz-
    苹果 Safari WebKit -webkit-
    欧朋 Opera Presto -o-

    展开全文
  • 网页问题解决方案,内容详细!兼容IE6 ff 等
  • 页面在360浏览器下的兼容性问题解决

    万次阅读 热门讨论 2014-05-26 14:09:23
    引言: Web应用的开发过程中,发现若干页面在360的浏览器上显示不正常,而其他的浏览器上,皆为正常状态,问题出哪里呢?

    引言:  在Web应用的开发过程中,发现若干页面在360的浏览器上显示不正常,而在其他的浏览器上,皆为正常状态,问题出在哪里呢?


    问题的提出:

         Web页面在360的浏览器上,显示不正确。 但是在Firefox、chrome和IE8+以上的浏览器上,都是显示正常的。

    问题的分析

      1.  检查了一些Javascript框架,标准的jquery类库1.x系列,确认其工作正常,问题不是在于Javascript方面。

      2.  排查掉HTML标签内容的显示 问题。

      3.  怀疑是CSS在不同浏览器下的兼容性问题,见过排查,没有发现问题。

      4.  排查360浏览器,发现其在当前页面的显示中,默认使用了IE7的渲染引擎。同时,在IE7的环境下,重现了类似情况。

      5.  本质上,这个显示问题是页面在IE7下面的兼容性显示问题。


    关于360浏览器或搜狗浏览器的分析:

      对于此类浏览器,有时候号称双核或者N核的高速浏览器,其本质上就是本地IE浏览器的壳子,外加Chrome抑或Firefox的内核,大部分情况下都是WebKit系列内核。

    那么,此类浏览器依据什么信息,来判断页面的渲染模式呢?答案就是可以指令运行当前页面的浏览器使用何种渲染引擎的声明。

    <meta http-equiv="X-UA-Compatible" content="IE=8">

    这里,就是指令浏览器至少要使用IE8以上的渲染引擎来,渲染页面,从而规避掉IE7下的问题。


    关于Doctype.

    <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。

    <!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

    在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。

    分析:  doctype所要解决的就是使用何种HTML的语法解析器和渲染器。比如特定HTML标签的使用,则依赖于HTML Doctype的使用。




    展开全文
  • 解决web页面浏览器兼容性问题

    千次阅读 2015-03-09 20:20:31
    浏览器兼容性问题是每个做web页面常常遇到的问题,而且还不得不解决的问题。造成这种局面的主要原因就是各大公司都推出自己的浏览器,而他们某些方面的规范还不一样。  我们现在常用的浏览器内核有: Trident...

    浏览器兼容性问题是每个做web页面常常遇到的问题,而且还不得不解决的问题。造成这种局面的主要原因就是各大公司都推出自己的浏览器,而他们在某些方面的规范还不一样。

            我们现在常用的浏览器内核有:

    Trident这是微软开发的一种排版引擎。该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到目前的 IE7。Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用IE内核而非IE的浏览器涌现(如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等)。
    自从发布后,Trident不断地被更新和完善:

    Trident II(IE5)——增进对CSS1.0的支持及对CSS2重大的变更;

    Trident III(IE5.5)——修正部分CSS的排版控制;

    Trident IV(IE6)——修正了一部分box-model的错误以及增加了“兼容模式(Quirks Mode)”切换功能,以增加对文件类型描述(Document Type Definition,DTD)的支持;

    Trident V(IE7)——修正许多CSS排版处理上的错误以及增加对PNG格式alpha通道(半透明)的支持。

    Geckos是套开放源代码的、以C++编写的网页排版引擎。这软件原本是由网景通讯公司开发的,Netcape6开始采用该内核。后来的 Mozilla FireFox也采用了该内核,Geckos的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。Geckos 现在由Mozilla基金会维护。

    Presto是一个由Opera Software开发的浏览器排版引擎,该内核在2003年的Opera7中首次被使用,该款引擎的特点就是渲染速度的优化达到了极致,也是目前公认网页浏览速度最快的浏览器内核。

    Webkit苹果公司自己的内核,也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来,它们都是自由软 件,在GPL条约下授权,同时支持BSD系统的开发。所以Webkit也是自由软件,同时开发源代码。在安全方面不受IE、Firefox的制约,所以 Safari浏览器在国内还是很安全的。

    简单的总结一下:

    使用Trident内核的浏览器:IE、Maxthon、TT、The World等;

    使用Gecko内核的浏览器:Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey;

    使用Presto内核的浏览器:Opera7及以上版本;

    使用Webkit内核的浏览器:Safari、Chrome。

    另外:

    现在我们很多浏览器都推出多核浏览器,像360,搜狗等就有适应ie的Trident核心  和google的Webkit核心。

    针对多核浏览器不同模式在显示网页时可能会产生不同的效果。

    1、解决兼容性方案一:

     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"> 
    这个的意思主要就是要浏览器使用ie7或者ie7以上的版本进行解析网页。

    2、解决兼容性方案一二:

    <html>
      <head>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
      </head>
      <body>
      </body>
    </html>

    content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。 

    若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"> 

    若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp"> 

    若页面需默认用ie标准内核,增加标签:<meta name="renderer" content="ie-stand"> 



    展开全文
  • 总结了项目设计中遇到的兼容性问题,此整理出来,以备不时之需。 解决ie8 css :nth-child(4n) 不兼容问题 主要是利用硬方法 第一种:利用first-child,该方法ie可以使用 .huo_game_ ul li:first-child+li+li+li...

    兼容性问题

    总结了在项目设计中遇到的兼容性问题,在此整理出来,以备不时之需。

    解决ie8 css :nth-child(4n) 不兼容问题

    主要是利用硬方法

    第一种:利用first-child,该方法在ie可以使用
    .huo_game_ ul li:first-child+li+li+li,
    .huo_game_ ul li:first-child+li+li+li+li+li+li+li,
    .huo_game_ ul li:first-child+li+li+li+li+li+li+li+li+li+li+li {
      margin-right: 0;
    }
    //还有一种方法就是利用jq的nth-child
    $(".huo_game_ ul li:nth-child(4n)").css("margin-right","0")
    

    解决ie7的高度丢失

    *padding 或者 _paddding
    *height _height
    *margin _margin
    *width _width

    CSS -webkit-box-orient: vertical 属性编译后丢失问题

    解决方法

    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    

    高斯模糊

    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
    -webkit-filter: blur(1px); /* Chrome, Opera */
    -moz-filter: blur(1px);
    -ms-filter: blur(1px);  
    filter: blur(1px);
    /* IE6~IE9 */
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false);
    
    /*知识点*/
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='x', MakeShadow='x', ShadowOpacity='x')
    
    • PixelRadius,设置对象的模糊半径,1~100数值。
    • MakeShadow,设置对象是否投影,布尔值,true和false
    • ShadowOpacity,设置对象投影不透明度,0.0~1.0,假如MakeShadow为false那么该值无效。

    rgba兼容

    ie8及以下版本

    background: rgba(0, 0, 0, .4);
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#66000000, endcolorstr=#66000000);
    

    这个颜色“#66000000”是由两部分组成的。
    第一部是#号后面的66。是rgba透明度0.4的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下:

    img

    即:alpha*255得到的值再转换为16进制即可。

    第二部分是7f后面的六位 是六进制的颜色值,跟rgb函数中的取值相同,比如rgb(255,255,255)对应#ffffff。

    box-shadow 兼容

    ie8及以下版本

    -moz-box-shadow:3px 5px 5px #000;
    -webkit-box-shadow:3px 5px 5px #000;
    box-shadow:3px 5px 5px #000;
    
    filter: progid:DXImageTransform.Microsoft.Shadow(color=gray, Direction=125, Strength=9);
    

    strength是阴影大小,direction是阴影方位,单位为度,可以为负数,color是阴影颜色 (尽量使用数字)
    使用IE滤镜实现盒子阴影的盒子必须是行元素或以行元素显示(block或inline-block;)

    filter界面滤镜

    在ie中 filter 分为静态滤镜(Visual Filters)和过渡转场(Transitions Reference),前者是的效果可以设置元素的不透明度、渐变、模糊、对比度、明度等这些,后者注重的ie的动画效果。

    .test{
        filter:progid:DXImageTransform.Microsoft.    /*.后面都是紧跟着各种滤镜和转场函数*/
    }
    
    /*如:模糊滤镜*/
    .blur{
        filter:progid:DXImageTransform.Microsoft.Blur()    /*.函数的开头第一个字母必须大写,括号()里面的滤镜的各种值*/
    }
    

    一般常用Blur,Shadow,Gradient,对应,filter:blur(),box-shadow,rgba();

    圆角border-radius兼容

    需要下载PIE.htc
    然后css中

    /*关键属性设置 需要把路径设置好*/
    behavior: url(PIE.htc);
    
    展开全文
  • 解决 VUE页面在IE9中兼容性问题 main.js 文件中置顶添加以下代码: window.console = window.console || (function () { var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile ...
  • 页面滚动距离兼容性解决 *{ margin:0; padding:0; list-style:none; font-family: "微软雅黑","张海山锐线体简"} body{height:2000px;} #div1{width:100px;height:101px;background:red; position:fixed;right:...
  • 最近使用react官方脚手架create-react-app建立项目的时候发现ie浏览器打开时显示空白,主流的...首先我翻了下create-react-app的文档,从中看到了正好有对ie9、ie10、ie11的兼容性问题解决的一个方案。这时需要...
  • 当我们编写了一个网页,也就是常说的HTML...浏览器兼容性兼容性问题的出现,是因为浏览器内核的不同,导致的解析差异。我们常见的浏览器内核主要有两种,分别是渲染引擎和js引擎。最常见的浏览器内核有四种:Tride...
  • 网页页面NULL值对浏览器兼容性的影响  最近做项目中一个页面中的input radio出现浏览器兼容性问题。  主要问题:  谷歌浏览器,360急速模式和搜狗急速模式中给radio初始动态赋值时,checked属性失效,无法...
  • 兼容性兼容性:浏览器兼容问题和适配问题统称为兼容性问题解决办法1.hack语法,控制解决办法eg:说明:gt(大于)lt (小于)gte (大于等于)lte (小于等于)等于 (不)! (不等于)2.常规(直接解决办法)-webkit-(谷歌)-o-...
  • 解决网站页面在不同浏览器的兼容模式下加载渲染不正常的问题引言: 网站运维过程中,发现若干页面在360等的浏览器上显示不正常,而...通过实验,发现只有IE7内核下面才存在兼容性显示问题 通过查找资料 http:
  • 刚开始写页面的时候,会出现很多问题,当然兼容性问题是最不容忽视的。然而就刚刚我代码的时候,谷歌运行的很好的代码,突然转到360的三种模式的时候,就出现了各种问题。然而我也各种找解决办法,终于还是...
  • Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案
  •  WIN7+IE8下,某区域项目的功能页面出现导航栏和页面排版样式丢失的兼容性问题。 解决思路:  1. 上网查相关的兼容性问题触发场景和相关解决方案,基本遇到的是不沾边或不靠谱的三四手技术帖,不足以解决实际...
  • 解决CSS3网页兼容性问题
  • 背景 近日,由于博主的笔记本电脑过于卡顿,升级了128GB的固态硬盘到512GB,重装系统后也需要重装生产力工具——Adobe系列全家桶。 2019年10月,Adobe发布了最新的Adobe Premiere ...然而,本次Adobe Premiere P...
  • [css] 移动端微信页面有哪些兼容性问题及解决方案是什么? 1.rem方案通过reset js进行适配 2.vw 方案 搭配px to viewport进行适配 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷...
  • 使用最高级的ie内核,如果支持谷歌内核,使用谷歌内核 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 这 样可以达到的效果是如果安装了GCF,则...
  • 如何解决CSSIE8下的兼容性问题再谈CSS兼容性问题,IE8应该是目前的主流浏览器,本文我们就来解决I8下的兼容性问题。第一个办法,在网页头部放上如下代码,这个方法也是最普遍用的,大家可以打开四大门户看看,...
  • 网页 浏览器兼容性问题的解决

    千次阅读 2011-08-18 15:00:49
    学习顺便总结经验: ...经过调试ie8,打开ie8->页面->兼容性视图设置->勾选【在兼容性视图中显示所有网站】,解决了问题。 解决方案2:head头部 title下面 加上:  .IE8Fix{z-index: 100;}
  • 通过Meta标签解决网页兼容性问题

    千次阅读 2016-06-02 16:32:52
    Meta标签还可以解决网页兼容性问题,由于IE已更新到11版本,但是我们有不少网站系统还是采用的IE8兼容模式,那么我们可以通过Meta标签IE9+以上版本默认使用IE7或者IE8的标准进行宣染! Met
  • 解决兼容性的方法

    2018-10-09 08:54:00
    解决兼容性的方法 1.清除浮动的兼容性: 清除浮动低版本浏览器不可以使用,需要处理兼容性加一个 .clearfix{*zoom:1;} 2.rgb和rgba和opacity的兼容性: rgb 和 opacityie低版本中不支持,需要加一个...
  • 关键是不同厂商,甚至同一厂商不同版本,对同一段CSS的解析效果也不一致,这就导致了页面显示效果不统一,也就带来了兼容性问题。 多么希望Chrome能够一统江湖啊~~ 4种方案解决CSS浏览器兼容性问题 目前
  • 解决ireport兼容性问题以及A4页面设置 1.修改打印报表时与使用的ireport版本与以前不一样的情况下 工具→选项→general→compatibility(兼容性) 选择之前使用的版本与之前兼容; 2.打印A4时候的页面大小设置: ...
  • 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览器的bug,并且他们制作的页面后期易维护,...
  • 前端页面兼容问题主要表现我们所做的页面在不同浏览器显示会有所不同,目前主要的兼容性问题比较多的是IE6和IE7,另外针对html5和css3新标签,比如css3动画,媒体查询,画布,视频等暂时不做讨论,下面就针对常见的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 224,433
精华内容 89,773
关键字:

在写页面是怎么解决兼容性