精华内容
下载资源
问答
  • 2017-03-09 15:25:15

    最近更新时间:2017年5月24日15:43:10

    《我的博客地图》

        随着现代浏览器发展速度太快,种类多,版本多,不同厂商浏览器或同一厂商不同版本的浏览器,对css的解析不同,以至于出现浏览器的渲染规范和css的渲染规范出现不兼容性,表现为同样的代码在不同浏览器下的显示效果出现差异化。但作为一款产品,必须要在不同设备上显示效果相同,因此,在css编码过程中需要加入兼容性代码。

        在html文档的head标签中加入如下meta标签,对于360的双核浏览器,浏览器会自动启动webkit内核渲染:

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    IE=edge,使用最高界别模式显示内容

    chrome=1,谷歌的外挂插件Google Chrome Frame(谷歌内嵌浏览器框架GCF),使用IE浏览网页时实际上是使用Chrome浏览器内核渲染,最低支持IE6,但前提是客户端已经安装GCF。

    <meta name="renderer" content="webkit">

    这个meta标识是360独有识别的,搞定360绝大部分的兼容。

       兼容性解决方案:

    1、css hack

        css hack,让css代码兼容IE浏览器,呈现出和其他厂商浏览器相同的UI界面。

        方式一:条件注释法

    <!--[if IE]>只在IE浏览器生效<![endif]-->

    <!--[if IE] 6>只在IE6浏览器生效<![endif]-->

    <!--[if gte IE 6]>只在IE6+浏览器生效<![endif]-->

    <!--[if ! IE 8]>只在非IE8浏览器生效<![endif]-->

    <!--[if ! IE]>只在非IE浏览器生效<![endif]-->

        方式二:属性前缀法

    *color:red;//IE7+的hack

    +color:red;

    -color:red;//IE6-的hack

    _color:red;//IE6-的hack

    #color:red;//IE6的hack

    color:red\0;//IE8-10的hack

    color:red\9;//IE6-10的hack

    color:red\9\0;//IE9-10的hack

    color:red !important;

    书写顺序,其他浏览器的css写在前面,IE7写在中间,IE6写在最后面

        方式三:选择器前缀法,假如要给#id1的元素写样式,如下,

    *#id1{};//IE6的hack

    *+#id1{};//IE7的hack

    还有\0、\9、等

    2、浏览器前缀写法

        浏览器内核:IE-Trident,Firefox-Gecko,Opera-Blink,Chrome-Webkit,Safari-Webkit,360-兼容模式Trident+极速模式Webkit

        在css属性名称前加上浏览器前缀,即可实现属性的兼容性,兼容属性会被该浏览器识别并渲染出来;有浏览器前缀的css属性应该放在没有浏览器前缀的css属性之后,以保证hack起作用。

    -webkit-(safari chrome)、

    -moz-(Firefox)、

    -ms-(IE)、

    -o-(opera);


    css选择器使用注意事项:为保证兼容性,尽量不要使用太高级的选择器,比如,

    p:first-of-type{};//选择每个p元素是其父级的第一个子元素

    兼容性为,支持该属性选择器的第一个浏览器版本号,如下,

    chrome 4+,IE 9+,firefox 3.5+,safiri 3.2+,opera 9.6+


    css兼容性实例解决方案汇总:

    1、父元素为flex属性,子元素为左固定宽,右自适应宽,但在IOS低版本系统中此布局失效,解决方案如下:

    display: -webkit-flex; display: flex;
    -webkit-flex-basis: 8.9rem; flex-basis: 8.9rem;
    -webkit-flex-grow: 1; flex-grow: 1;

    2、transform属性兼容性解决方案:

    transform:rotate(180deg);

    -webkit-transform:rotate(180deg); 

    3、block元素手动设置为inline-block元素时,横向布局出现间隙

    解决方案:设父元素font-size:0;

    4、input元素的placeholder属性,IE6-9不支持

    5、定制个性化滚动条

        滚动条出现的条件:

        一、文档内容高度/宽度 大于 浏览器的高度/宽度;

        二、文档内元素人为设置固定宽高后,再设置属性overflow || overflow-x || overflow-y : scroll,即可出现滚动条效果;

        由于不同内核浏览器的css hack不同,因此,针对不同内核浏览器有不同的解决方案,以<div class="content"></div>元素为例,定制该元素的滚动条样式,水平方向禁止滚动,垂直方向可滚动:

    <style>

    .content{width:100px; height:50px; overflow-x:hidden; overflow-y:scroll}

    </style>

        weekit内核:以下选择器选择的内容,可理解为块级元素

    .content::-webkit-scrollbar{width:2px; background:#fff}//设置 滚动条 整体的样式

    .content::-webkit-scrollbar-thumb{background:#f00}//设置 滚动器 的样式

    .content::-webkit-scrollbar-button{background:#0f0}//设置 滚动条 顶部和底部 的按钮样式

    .content::-webkit-scrollbar-track{}//外层轨道 样式

    .content::-webkit-scrollbar-track-piece{}//内层轨道 样式,不包括 滚动器 部分

    .content::-webkit-scrollbar-corner{}//右下角 边角 样式

    .content::-webkit-resizer{}//可缩放的.content的 右下角 边角样式

    未完,待续……


    更多相关内容
  • 4种方案解决CSS浏览器兼容性问题 为什么会有浏览器兼容性问题? 还不是因为浏览器厂商太多了! Chrome,Frirefox,Safari,Edge,IE6,IE7,IE8,IE9…360安全浏览器,qq浏览器,世界之窗,TT,搜狗,opera,maxthon...
  • css兼容性测试

    2012-12-21 11:06:43
    css兼容性测试事例 包含IE6,7,8,9 Firefox Safri 360 Opera 等多款浏览器下显示效果
  • 下面小编就为大家带来一篇关于css兼容性问题及一些常见问题汇总。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧,祝大家游戏愉快哦
  • css 兼容性书写记录

    2020-09-25 10:41:41
    很早开始就知道css hack并使用之,以前觉得css hack是个很神奇的东西能解决很多兼容性问题,渐渐地发现,其实不容hack的页面才是更好的选择
  • CSS兼容性 在网络中浏览器众多,因为不同浏览器使用内核及对W3C标准的支持不一样,各个浏览器对于页面的解释呈视也不尽相同。以及用户客户端的环境不同(如分辨率不同)造成的显示效果不能达到理想效果。最常见的...

    1. CSS兼容性

    在网络中浏览器众多,因为不同浏览器使用内核及对W3C标准的支持不一样,各个浏览器对于页面的解释呈视也不尽相同。以及用户客户端的环境不同(如分辨率不同)造成的显示效果不能达到理想效果。最常见的问题就是网页元素位置混乱,错位。目前暂没有统一的能解决这样的工具.

    最普遍的解决办法就是不断的在各浏览器间调试网页显示效果,通过对CSS样式控制以及通过脚本判断并赋予不同浏览器的解析标准。

    总结: 所以为css兼容性,就是针对于不同浏览器我们书写不同的样式,从而达到统一的样式效果。

    其实,css兼容性,主要针对于ie的旧版浏览器, 因为其他浏览器比较符合w3c规范。
    在这里插入图片描述

    2.1 属性hack

    CSS前缀hack	针对的浏览器_color:red;	IE6 专属*color	IE7 及其以下版本CSS后缀hack	针对的浏览器color:red\9;	IE6/IE7/IE8/IE9/IE10版本(不包含ie11 以下同样如此)color:red\0;	IE8/IE9/IE10版本color:red\9\0;	IE9/IE10color:red!important	IE7/IE8/IE9/IE10及其其他非ie

    2.2 选择器hack

    (1)IE6(含)以下的版本识别
    
    语法:* html 选择器 {...}
    
    例如:
    
    html .content { width:300px; height:300px; border:1px dashed #0066FF;
    }
    (2)只有IE7识别
    
    语法:*+html 选择器 {....}
    
    例如:
    
    *+html .content { width:300px; height:300px; border:1px dashed #0066FF;
    
    }
    

    (3)媒体查询的写法

    @media screen\9{body { background: red; }}	只对IE6/7生效
    @media \0screen {body { background: red; }}	只对IE8生效
    @media \0screen\,screen\9{body { background: blue; }}	只对IE6/7/8有效
    @media screen\0 {body { background: green; }}	只对IE8/9/10有效
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }}	只对IE10有效
    

    2.3 条件注释语法

    注意: 在ie10.ie11 已经不支持 if ie 这些语句了,其实ie10以上基本已经和ff,chrome差不多了,因此不需要单独指定兼容性了。

    (1)只有IE浏览器中可见
    
    <!--[if IE]>
    <p>你在非IE中将看不到我的身影</p>
    <![endif]-->
    (2)判断等于某个IE浏览器版本的语法
    
    语法:
    
    <!--[if IE 7]>只能被 IE7 识别;<![endif]-->
    例如:
    
    <!--[if ie 7]>
    
        <link rel="stylesheet" type="text/css" href="css/c.css">
    
    <![endif]-->
    (3)判断IE浏览器的范围:gte,gt,lte,lt
    
    gte	表示高于或等于某个IE浏览的版本
    gt	表示高于某个IE浏览器的版本
    lte	表示低于或等于某个IE浏览器的版本
    lt	表示低于某个IE浏览器的版本
    语法:
    
    <!--[if gte ie 版本号]>要判断的内容<![endif]-->
    例如:
    
    <!--[if gte ie 5]>
        <link rel="stylesheet" type="text/css" href="css/c.css">
    <![endif]-->
    (4) 判断非IE浏览器
    
    语法:
    
    <!--[if ! ie]><!-->要判断的内容<!--<![endif]-->
    例如:
    
    <!--[if ! ie]><!-->
    
        <link rel="stylesheet" type="text/css" href="css/c.css">
    
    <!--<![endif]-->
    

    2.4 检测是否了解兼容性

    (1)以下代码兼容 ie6.7.8.谷歌浏览器各自显示的颜色

    #tip {
    
    background:blue;
    
    background:red \9;
    
    *background:black;
    
    _background:orange;
    
    }
    

    答案:

    background:blue; chrome 背景变蓝色
    
    background:red \9; IE8 背景变红色
    
    *background:black; IE7 背景变黑色
    
    _background:orange; IE6 背景变橘色
    

    2.5 总结兼容性

    其实,最好的兼容性还是要写符合标准的代码, 注意前面讲过的特殊属性,比如外边距合并,浮动脱标等等。

    非要使用css hack的话,要注意顺序千万不要乱,因为当出现重复定义时,浏览器默认按最后一下渲染,所以一定要先正常,再*,最后_。 (先大后小或者 先全局后局部)

    在这里插入图片描述

    学IT,上博学谷
    感谢博学谷老师们强大的技术储备

    展开全文
  • css 兼容性问题this.style.cursor='hand'让我们来CSS HACK
  • CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下。
  • Web-pack新版教程13 css兼容性处理.mp4
  • 1. vsCode 配置自动补全CSS兼容性代码,Autoprefixer 3.0 及以上版本无效。 2. 特意测试了3.0以上版本,包含3.0,在配置的时候代码颜色就提示了,配置无效是不会出现Autoprefixer CSS命令的。 解决方案: 将 ...

    问题:
    1. vsCode 配置自动补全CSS兼容性代码,Autoprefixer 3.0 及以上版本无效。

    2. 特意测试了3.0以上版本,包含3.0,在配置的时候代码颜色就提示了,配置无效是不会出现Autoprefixer CSS命令的。

    解决方案:

    将 Autoprefixer 3.0.1版本降成3以下的版本(Autoprefixer 2.2.0)。

    解决步骤:

    1. 先降低Autoprefixer插件的版本。

     在npm安装全局

     npm i -g autoprefixer
     npm i -D autoprefixer

    2. 再配置Autoprefixer的setting.json。

    设置→扩展→Autoprefixer configuration options

     

     提示:配置设置完成后注意配置代码颜色,颜色朦胧样式的那就是无效的配置。

    配置源码:

    "autoprefixer.browsers": [
            // "last 9 versions", 
            "ie >= 6",  //ie6以上
            "firefox >= 8",
            "chrome >= 24",
            "Opera>=10"
        ]
    

    关闭vsCode软件。单机右键设置 属性 > 兼容性 ,选择 “以管理员身份运行此程序”

     


    写在最后:

    全部完成之后,切换页面到CSS页面ctrl+shift+p→输入Autoprefixer CSS命令就可以完成CSS兼容代码自动补全。

     

     
     

    展开全文
  • webpack生产环境配置-css兼容性处理

    千次阅读 2020-03-24 23:36:43
    css兼容性处理 1,创建文件 2,下载loader npm install --save-dev postcss-loader postcss-preset-env 3,修改配置文件webpack.config.js const { resolve } = require('path'); const HtmlWebpackPlugin = ...

    css兼容性处理

    1,创建文件
    在这里插入图片描述
    2,下载loader

    npm install --save-dev postcss-loader postcss-preset-env

    3,修改配置文件webpack.config.js

    const { resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    // 设置nodejs环境变量
    // process.env.NODE_ENV = 'development';
    
    module.exports = {
      entry: './src/js/index.js',
      output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
              /*
                css兼容性处理:postcss --> postcss-loader postcss-preset-env
    
                帮postcss找到package.json中browserslist里面的配置,通过配置加载指定的css兼容性样式
    
                "browserslist": {
                  // 开发环境 --> 设置node环境变量:process.env.NODE_ENV = development
                  "development": [
                    "last 1 chrome version",
                    "last 1 firefox version",
                    "last 1 safari version"
                  ],
                  // 生产环境:默认是看生产环境
                  "production": [
                    ">0.2%",
                    "not dead",
                    "not op_mini all"
                  ]
                }
              */
              // 使用loader的默认配置
              // 'postcss-loader',
              // 修改loader的配置
              {
                loader: 'postcss-loader',
                options: {
                  ident: 'postcss',
                  plugins: () => [
                    // postcss的插件
                    require('postcss-preset-env')()
                  ]
                }
              }
            ]
          }
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
          filename: 'css/built.css'
        })
      ],
      mode: 'development'
    };
    
    

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    4,修改package.json

      "browserslist": {
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ],
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ]
      },
    

    在这里插入图片描述

    展开全文
  • css入门教程IE和Firefox浏览器CSS兼容性技巧整理.docx
  • div+css兼容性问题全解 1div+css如何使网站兼容不同字体 使用utf-8内码进行编写 (右键-编码-选择一种其它国家的编码-查看效果) asp代码如下: % functionchinese2unicode(Str) dimi dimStr_one dimStr_unicode fori=1...
  • IE5,IE6,IE7,IE8的css兼容性列表,不压缩不让上传,是doc文档,欢迎大家补充 IE5,IE6,IE7,IE8的css兼容性列表,不压缩不让上传,是doc文档,欢迎大家补充
  • CSS兼容性问题解决方案[归类].pdf
  • webpack 学习10 ,css 兼容性处理

    千次阅读 2020-03-03 09:46:58
    这玩意主要将我们一些css3 的... css兼容性处理:postcss --> postcss-loader postcss-preset-env 帮postcss找到package.json中browserslist里面的配置,通过配置加载指定的css兼容性样式 "browserslist": {...
  • iphone safari浏览器CSS兼容性的解决方案集合
  • IEFirefox 兼容性CSS 详解手册 蒂强视频网整理 1.区别IE 和非IE 浏览器CSS HACK 代码 #Dqiang{ background:blue; /*非IE 背景藍色*/ background:red \9; /*IE6IE7IE8 背景紅色*/ } 2.区别IE6,IE7,IE8,FF CSS HACK ...
  • CSS兼容性调整

    2012-04-26 18:51:19
    css样式调整方案 前台构架师必读 css兼容各种浏览器
  • 主要介绍了CSS浏览器兼容性常见问题,ie各版本的浏览器的兼容情况做了详细介绍,开发中需要注意到的兼容性问题大家可以注意一下,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
  • 一些CSS兼容性处理写法汇总。

    千次阅读 2019-01-07 22:41:53
    一、placeholder修改样式兼容性写法: 由于placeholder是h5新特性之一,目前还有兼容性问题,所以这样写以兼容各浏览器。 input::-webkit-input-placeholder{ color:red; } input::-moz-placeholder{ /* ...
  • 兼容性处理要点 1、DOCTYPE 影响 CSS 处理 2、FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 3、FF: 支持 !important, IE 则忽略, 可用 !...
  • Vscode 安装Autoprefixer插件(自动补全css兼容性前缀) 浏览器配置 "autoprefixer.browsers": [ "last 3 versions", // "ie >= 10", // "ie_mob >= 10", // "ff >= 30", "chrome >...
  • DIV+css兼容性FFIE6IE7IE8IE9[借鉴].pdf
  • 关键是不同厂商,甚至同一厂商不同版本,对同一段CSS的解析效果也不一致,这就导致了页面显示效果不统一,也就带来了兼容性问题。 多么希望Chrome能够一统江湖啊~~ 目前各浏览器市场份额 浏览器这么多,我们也不可能...
  • div+css兼容性

    2015-08-28 18:29:14
    用一行代码来解决CSS在,IE6,IE7,IE8,IE9,IE10 中的各种兼容性问题。在网站前端写代码的过程中,很多时间IE各个版本的兼容问题很难整。
  • 使用vsCode编辑器,配置Autoprefixer3.0无法实现自动补全兼容性代码 解决方法: 将Autoprefixer3.0更换到2.0版本,再将网上冲浪的结果整理了一番,终于找到了解决办法,并进行以下步骤进行验证。有一说一,有问题...
  • 要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全...
  • 遇到的问题:vscode安装完autoprefixer之后,在css文件中不生效怎么办? 这种情况需要自己手动设置 1.点击vscode的文件,进入首选项下面的设置里 2.搜索autoprefixer 进入settings.json中 3.输入: "...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 182,768
精华内容 73,107
关键字:

css兼容性

友情链接: miro.rar