精华内容
下载资源
问答
  • 浏览器适配

    2018-10-15 20:28:00
    浏览器适配 -o-:Opera浏览器 -ms-:IE浏览器 -moz-:Firefox浏览器 -webkit-:Chrome、Safari、Android浏览器 径向渐变 .box { width: 200px; height: 200px; border-radius: 50...

    浏览器适配

    • -o-:Opera浏览器

    • -ms-:IE浏览器

    • -moz-:Firefox浏览器

    • -webkit-:Chrome、Safari、Android浏览器

    径向渐变
    .box {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-image: -webkit-radial-gradient(red, yellow);
    }
    ​
    倒影
    -webkit-box-reflect: below | above | left | right;
    

      

     

     

    转载于:https://www.cnblogs.com/zhangpang/p/9794434.html

    展开全文
  • 浏览器适配,各大浏览器适配,主流/冷门浏览器适配 flex布局问题 flex布局早在2009年就有了,到现在已经有了好几个版本。详细内容可查看这篇文章。flex布局兼容性 其中IE10部分支持2012,需要使用-ms-前缀。 而IE9不...

    浏览器适配,各大浏览器适配,主流/冷门浏览器适配

    flex布局问题
    flex布局早在2009年就有了,到现在已经有了好几个版本。详细内容可查看这篇文章。flex布局兼容性

    其中IE10部分支持2012,需要使用-ms-前缀。

    而IE9不支持flex布局:

    针对IE9以下的flex布局,git有一些三方js,例如flexibility但是并没有研究出来使用办法,其js会莫名添加一些样式,修改起来很麻烦。我使用的是css hack来解决IE适配。或者在开发初期就不要选择flex布局,改为float或者inline-block,当然里面也会有一些属性的差别,不多相比flex小很多,嗯,但是flex这么好用,怎么舍得不用呢
    在这里插入图片描述

    使用css hack解决兼容ie的办法如下:

    什么是CSS hack
    由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!

    CSS hack的原理

    由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优先级对浏览器展现效果的影响,我们可以据此针对不同的浏览器情景来应用不同的CSS。
    CSS hack书写顺序:一般是将适用范围广、被识别能力强的CSS定义在前面。

    CSS hack分类

    CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
    (1)属性前缀法(即类内部Hack):例如 IE6能识别下划线"“和星号” * “,IE7能识别星号” * “,但不能识别下划线”",IE6~IE10都认识"\9",但firefox前述三个都不能认识。
    (2)选择器前缀法(即选择器Hack):例如 IE6能识别html .class{},IE7能识别+html .class{}或者*:first-child+html .class{}。
    (3)IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): ,针对IE6及以下版本: 。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

    CSS hack方式一:条件注释法

    这种方式是IE浏览器专有的Hack方式,引入js同理。

    所有的IE都起作用:
    <!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->
    IE以外的浏览器起作用:
    <!--[if !IE]><!-->  <link rel="stylesheet" type="text/css" href="not-ie.css" /> <!--<![endif]-->
    只有IE7起作用:
    <!--[if IE 7]>  <link rel="stylesheet" type="text/css" href="ie7.css"> <![endif]-->
    只有IE6起作用:
    <!--[if IE 6]>  <link rel="stylesheet" type="text/css" href="ie6.css"/> <![endif]-->
    只有IE5起作用:
    <!--[if IE 5]>  <link rel="stylesheet" type="text/css" href="ie5.css"/> <![endif]-->
    只有IE5.5起作用:
    <!--[if IE 5.5000]>  <link rel="stylesheet" type="text/css" href="ie55.css"/> <![endif]-->
    只对IE6及以下的版本起作用:
    <!--[if lt IE 7]>  <link rel="stylesheet" type="text/css" href="ie6-and-down.css"/> <![endif]-->
    <!--[if lte IE 6]>  <link rel="stylesheet" type="text/css" href="ie6-and-down.css"/> <![endif]-->
    只对IE7及以下的版本起作用:
    <!--[if lt IE 8]>  <link rel="stylesheet" type="text/css" href="ie7-and-down.css"/> <![endif]-->
    <!--[if lte IE 7]>  <link rel="stylesheet" type="text/css" href="ie7-and-down.css"/> <![endif]-->
    只对IE8及以下的版本起作用:
    <!--[if lt IE 9]>  <link rel="stylesheet" type="text/css" href="ie8-and-down.css"/> <![endif]-->
    <!--[if lte IE 8]>  <link rel="stylesheet" type="text/css" href="ie8-and-down.css"/> <![endif]-->
    只对IE6及以上的版本起作用:
    <!--[if gt IE 5.5]>  <link rel="stylesheet" type="text/css" href="ie6-and-up.css"/> <![endif]-->
    <!--[if gte IE 6]>  <link rel="stylesheet" type="text/css" href="ie6-and-up.css"/> <![endif]-->
    只对IE7及以上的版本起作用:
    <!--[if gt IE 6]>  <link rel="stylesheet" type="text/css" href="ie7-and-up.css"/> <![endif]-->
    <!--[if gte IE 7]>  <link rel="stylesheet" type="text/css" href="ie7-and-up.css"/> <![endif]-->
    只对IE8及以上的版本起作用:
    <!--[if gt IE 7]>  <link rel="stylesheet" type="text/css" href="ie8-and-up.css"/> <![endif]-->
    <!--[if gte IE 8]>  <link rel="stylesheet" type="text/css" href="ie8-and-up.css"/> <![endif]-->
    

    CSS hack方式二:类内属性前缀法

    在标准模式中
    “-″减号是IE6专有的hack
    “\9″ IE6/IE7/IE8/IE9/IE10都生效
    “\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
    “\9\0″ 只对IE9/IE10生效,是IE9/10的hack

    例如:

    background-color:orange;  /* all - for Firefox/Chrome */  
    background-color:red\0;  /* ie 8/9/10/Opera - for ie8/ie10/Opera */  
    background-color:blue\9\0;  /* ie 9/10 - for ie9/10 */  
    *background-color:black;  /* ie 6/7 - for ie7 */  
    _background-color:green;  /* ie 6 - for ie6 */  
    

    CSS hack方式三:选择器前缀法

    选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
    目前最常见的是
    *html *前缀只对IE6生效
    +html +前缀只对IE7生效
    @media screen\9{…} 只对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 (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
    等等
    结合CSS3的一些选择器,如html:first-child,body:nth-of-type(1),可以衍生出更多的hack方式,具体的可以参考下表
    在这里插入图片描述

    使用方法详情链接

    CSS3选择器结合JavaScript的Hack

    我们用IE10进行举例:
    由于IE10用户代理字符串(UserAgent)为:Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0),所以我们可以使用javascript将此属性添加到文档标签中,再运用CSS3基本选择器匹配。

    JavaScript代码:

    var htmlObj = document.documentElement;
    htmlObj.setAttribute('data-useragent',navigator.userAgent);
    htmlObj.setAttribute('data-platform', navigator.platform );
    

    CSS3匹配代码:

    html[data-useragent*='MSIE 10.0'] #id {
        color: #F00;
    }
    

    CSS hack利弊
    一般情况下,我们尽量避免使用CSS hack,但是有些情况为了顾及用户体验实现向下兼容,不得已才使用hack。比如由于IE8及以下版本不支持CSS3,而我们的项目页面使用了大量CSS3新属性在IE9/Firefox/Chrome下正常渲染,这种情况下如果不使用css3pie或htc或条件注释等方法时,可能就得让IE8-的专属hack出马了。使用hack虽然对页面表现的一致性有好处,但过多的滥用会造成html文档混乱不堪,增加管理和维护的负担。相信只要大家一起努力,少用、慎用hack,未来一定会促使浏览器厂商的标准越来越趋于统一,顺利过渡到标准浏览器的主流时代。抛弃那些陈旧的IE hack,必将减轻我们编码的复杂度,少做无用功。

    提供一个利器,该网站提供了Chrome、IE6/7/8/9/10、Opera、Safari几个主流浏览器的CSS HACK,当然还有Javascript和Media Query Hack写法,内容更新快,是设计师和前端人员最佳选择。http://browserhacks.com/


    js的event.srcElement与event.target

    IE下,event对象有srcElement属性,但是没有target属性;
    Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即:
    firefox 下的 event.target 等于IE 下的 event.srcElement
    解决方法:使用obj = event.srcElement ? event.srcElement : event.target;
    或: var evtTarget = event.target || event.srcElement;
    srcElement详细属性用法链接

    js的.innerHTML = ""IE9下显示有错误的解决方法
    使用JQuery的dom.html()解决

    ie9 img需要指定高度

    原文链接:https://www.jianshu.com/p/2a9dc4990e09

    展开全文
  • 手机浏览器适配

    2016-11-17 15:17:14
    手机浏览器适配
    

    meta

    做手机网页经常会看到这样的一句代码

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

    • width=device-width 设置视图的宽度等于设备屏幕的宽度
    • initial-scale=1 设置初始缩放比例为1
    • minimum-scale=1 设置最小的缩放比例为1
    • maximum-scale=1 设置最大的缩放比例为1
    • user-scalable=no 不允许缩放

    做一个简单粗暴的变换

    <meta name="viewport" content="width=320, maximum-scale=1.3, user-scalable=no">
    将视图的宽度设为320,最大缩放比设为1.3,不设置初始缩放比。
    这样可以将整个视图进行缩放

    rem

    字体单位

    • px 无继承,常用
    • em 继承,相对于父元素继承
    • rem 继承,相对于root继承,一般为html,为css3属性,支持IE9+及其他现代浏览器
    • vh 1vh=视窗高度/100,为css3属性,支持IE9+,chrome20+,firefox19+,safari6+,android browser4.4+
    • vw 1vw=视窗宽度/100

      利用rem

      通过js来计算根元素的font-size,从而适应各种屏幕

      利用vh

      vh本来就是视窗高度的,根据不同的屏幕的视窗高度来适应

    p.s.果然我还是不会写博客

    展开全文
  • css样式、各个浏览器适配text-alignbackground-colorline-heightfloat清除浮动a标签去掉下划线滚动条样式修改 text-align text-align: center; /*IE*/ text-align: -moz-center; /*Firefox*/ text-align: -webkit-...

    text-align

    text-align: center; /*IE*/
    text-align: -moz-center; /*Firefox*/
    text-align: -webkit-center; /*Chrome*/
    

    background-color

    background-color:orange;  /* all - for Firefox/Chrome */  
    background-color:orange\0;  /* ie 8/9/10/Opera - for ie8/ie10/Opera */  
    background-color:orange\9\0;  /* ie 9/10 - for ie9/10 */  
    *background-color:orange;  /* ie 6/7 - for ie7 */  
    _background-color:orange;  /* ie 6 - for ie6 */ 
    

    line-height

    line-height: 35px\9; /*IE8*/
    *line-height: 35px; /* IE7支持 */ 
    _line-height: 35px; /* IE6支持 */ 
    -ms-line-height: 35px;/*IE9+支持*/
    -webkit-line-height: 1; /*chrome safair*/
    -moz-line-height: 35px;/*火狐*/
    

    float清除浮动

    <div class="clearfix">
    	<div class="f-left">左侧</div>
    	<div class="f-right">右侧</div>
    </div>
    
    .f-left {
      float: left;
    }
    
    .f-right {
      float: right;
    }
    .clearfix:after {
      /*伪元素是行内元素 正常浏览器清除浮动方法*/
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    
    .clearfix {
      *zoom: 1;
      /*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
    }
    

    a标签去掉下划线

    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-focus: none;
    -moz-user-select: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    

    滚动条样式修改

    .el-textarea__inner{
      overflow: auto;
      /*三角箭头的颜色*/
      scrollbar-arrow-color: rgb(193, 193, 193);
      /*滚动条滑块按钮的颜色*/
      scrollbar-face-color: rgb(193, 193, 193);
      /*滚动条轨道颜色*/
      scrollbar-track-color: rgb(255, 255, 255);
    }
    .el-textarea__inner::-webkit-scrollbar {
      width: 7px;
      height: 7px;
      background-color: rgb(241, 241, 241);
      border-radius: 3px;
    }
    
    .el-textarea__inner::-webkit-scrollbar-thumb {
      background-color: rgb(193, 193, 193);
      border-radius: 3px;
    }
    
    展开全文
  • 模态窗口详解及各浏览器适配经验分享
  • iPad的Safari浏览器适配小结
  • 浏览器适配前缀

    2016-09-07 15:01:00
    WebKit内核 -webkit- Comodo Drangon(科摩多龙),苹果,搜狗高速浏览器3,快快浏览器,枫树浏览器,云游浏览器,360极速浏览器,世界之窗极速版,SRWare Iron,猎豹浏览器,RockMelt,QQ浏览器 Presto内核 -o- ...
  • 1、使用rem进行浏览器适配:比较常用 rem(fontsizeoftherootelement)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem一定会想起em单位,em(fontsizeoftheelement)是指相对于父元素的...
  • Selenium多浏览器适配

    千次阅读 2017-06-13 21:26:29
    Selenium支持多种浏览器,实际测试中可以通过工程模式创建不同浏览器的实例,从而完成多种浏览器适配测试。Selenium支持的浏览器种类如下:  ChromeDriver:谷歌浏览器  InternetExplorerDriver:微软IE  ...
  • <div><p>该提问来源于开源项目:mashirozx/Sakura</p></div>
  • <video> <... //插入多个格式的视频,当第一个格式浏览器不支持时或尝试播放一个格式的视频,一次类推 <source src="" type="video/视频格式"></source></video> ...
  • css浏览器适配

    千次阅读 2015-04-22 21:02:08
    -webkit- //谷歌浏览器 -ms- // IE浏览器 - moz- //火狐浏览器 -o- // 欧朋浏览器
  • 手机浏览器适配web

    2020-04-30 17:45:14
    转载:https://www.jianshu.com/p/2c33921d5a68 另一篇文章:https://www.jianshu.com/p/cf600c2930cb
  • 浏览器适配 表格 表格 table th:代表表头 tr: 代表表格中的行 td:代表表格中的单元格 表格基本语法 &lt;table border="1" cellspacing="0" rules="all" cellpadding="10&...
  • CSS浏览器适配设置

    千次阅读 2016-05-29 21:17:09
    1、适配语法 选择器名称 { 属性:方法(值); -webkit-属性:方法(值);  /*safari chrome*/ -ms-属性:方法(值); /*IE*/ -o-属性:方法(值); /*opera*/ -moz-属性:方法(值); /*Firefox*/ ...
  • js导出word文档,兼容IE8浏览器 其他浏览器需要引入两个文件:FileSaver.js 和 jqueryWordExport.js 需要兼容IE8浏览器需要引用:FileSaver.js excanvas-IE8.js 和 jqueryWordExport-IE8.js html的js引入: <...
  • <script> var width=document.documentElement.clientWidth; var height=document.documentElement.clientHeight; console.log(width) console.log(height) ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,842
精华内容 1,136
关键字:

浏览器适配