【前端兼容】2016前端兼容笔记

工作一年多，发现博客大家都不怎么写了，本着分享的原则，这一年大大小小也积累了一些知识，希望大家少踩坑，当然，踩坑并不一定是坏事，那是一种成长。

前端制作考虑情况：

• 浏览器兼容，IE7、谷歌、火狐、360、百度等浏览器兼容；
• 屏幕适应，大屏和小屏的宽度适应，最小宽度和最小高度的限定；
• 考虑文字过多的情况；
• 表单输入设置提示选项，注意留有错误提示位置；
• 题目类页面切图时应考虑各种可能出现的题型，单选、多选、判断题等，题型中可能放置文字或者图片；
• 考虑各种表单控件样式统一，如输入框、下拉框、单选框和多选框。
• 移动端避免使用图片，圆角、阴影、渐变都可用CSS3实现；
• APP头部和底部固定（position:fixed;bottom:0||top:0）；
• 列表选中状态如果有current类标记当前样式，需放在所有列表项均适用；
• 内容部分应设置margin-bottom,以免遮挡底部；

前端制作遇到的一些小问题：

• IE7下设置overflow、z-index属性时，需同时对元素设置position:relative;

• 谷歌不兼容cursor:pointer问题解决方法：

     input[type="file"]::-webkit-file-upload-button{cursor:pointer;}

• CSS垂直居中方法：
  
  1. 对父元素设置display:table;
     缺点：不兼容IE7
  2. 设置positon:absolute||fixed;(推荐fixed)top:0;bottom:0;left:0;right:0;margin:0 auto;
     缺点：IE7不兼容，并且可视窗口缩小会有问题。
  3. position:absolute;top:50%;margin-top:-(height/2)px;left:50%;margin-left:-(width/2)px;
     缺点：浮层宽高不能自适应，需固定宽高。
  4. 使用JS设置位置
     样式

.reply_pop {
    margin:0px auto;
    position: absolute;
}

脚本

$(function () {
    $(window).resize(function () {
      // 设置弹框div位置
      setPosition($("#reply_pop"));
    }).resize();
  });
function setPosition(pop){
  pop.css("top",($(window).height()-pop.height())/2+'px');
  pop.css("left",($(window).width()-pop.width())/2+'px');  
}

• 元素可用于修改文档所有链接的根地址
• html*{border:1px solid #ccc;}意为所有元素继承html的border属性，可用于查看块的嵌套关系
• iframe边框去除可用style=”height:100%” border=”0” frameborder=”no” scrolling=”auto”来兼容IE浏览器
• 隐藏iframe滚动条可以设置border=”0” frameborder=”0” scrolling=”auto” style=”height:100%”
• 自动改变Iframe的高度：

function setIFrameHeight(iframe) {
            var ifm_content = document.getElementById("conFrame");
            ifm_content.height = "500px";//默认设置为500px
            var heightContent = "500px";
            var subContent = document.frames ? document.frames["conFrame"].document : ifm_content.contentDocument;
            if (iframe == "content") {//如果传入Ifame Id 等于content 重新给iframe赋值高度
                heightContent = Math.max(subContent.body.scrollHeight, subContent.documentElement.scrollHeight);
                ifm_content.height = heightContent;
            }
        }

实例说明:
Html中有一个Iframe 用法如下:

<iframe id="conFrame" src="a.html" frameborder="0" scrolling="no"
            width="100%"height="500px"onload="setIFrameHeight('content');"></iframe>

注：自动改变高度只是在初始化的时候将iframe高度设置成内容高度，当页面动态添加标签元素时，iframe高度不可自动增长，导致页面内容被遮住，目前比较好的方法是将iframe高度设置为窗口大小，显示滚动条。

• 使用iframe注意事项：
  
  1. iframe不能随窗口大小改变而自动改变，所以在window.resize时应该同样添加改变iframe高度的代码；
  2. 修改iframe加载时的高度，要把高度运算写在load方法里面，这样才能动态改变高度；
     例如

$(function(){
  $("#content").load(function(){
    var client_h=document.documentElement.clientHeight || document.body.clientHeight;
    var iframe_h=client_h-$(".f_wrap").height();
     $(this).height(iframe_h);
  });
});
$(window).resize(function() {
  var client_h=document.documentElement.clientHeight || document.body.clientHeight;
  var iframe_h=client_h-$(".f_wrap").height()-4;
  $("#content").height(iframe_h);
});

• 修改input不可编辑样式

input:disabled{
    background-color: #f5f5f5;
}

input[disabled]{
    background-color: #f5f5f5;
}

• 媒体查询and min-width:0兼容IE9及以上，可以用此方法过滤IE8以及以下版本；
• 通用图标尽量写在，因为变换数字即可变换图标，间距也可以统一控制（可使用字体图标进行图标设置，参考图标库阿里图标库）；
• position 定位详解
  static:默认值，元素按照正常文档流规划排列；
  relative:处于正常文档流中，可通过left,top定位；
  absolute：脱离正常文档流，可设置left,top，定位参考元素为父级且已设置定位属性的元素；
  fixed:脱离正常文档流，可设置left,top定位，以浏览器四角作为参考点；
  IE5.5-IE6不支持
• 三种情况脱离文档流：浮动、绝对定位和固定定位；
• 解决拖动滚动条闪烁的bug

*html{background-image:url(about:blank);background-attachment:fixed;}

• .vertical-align:middle;垂直居中针对的是当前元素的下一个元素（vertical-align:middle用于webkit浏览器对齐，line-height:用于IE垂直对齐，基本兼容所有浏览器）；
• 改变input placeholder颜色，并且不影响字体颜色：

 ::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #ccc;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #ccc;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #ccc;
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #ccc;
}

• CSS3垂直居中
  对父元素设置：display:table
  对子元素设置：vertical-align:middle; display:table-cell;
  注：父元素不可绝对定位。
• 禁止iPhone对input的默认样式

input[type="button"], input[type="submit"], input[type="reset"] {
    -webkit-appearance: none;
}

textarea {
    -webkit-appearance: none;
}  

• @font-face使用自定义字体，可用“字蛛”将文字压缩，node命令为：
  font-spider ./demo/*.html
• css限制段落行数，并且显示省略号

 overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;
-webkit-line-clamp:2; /*限制显示两行*/

• 解决iframe在IE9/8以下会有白边问题

    iframe{display:block;}

• 浏览器默认单选框书写规范：

<label class="defaultChex">
    <input type="checkbox" name="default1"> 
    折扣店
</label>

好了，这次就发这么多，还有一些js和jQuery笔记，后续再发，有问题随时讨论哈。
事始：只要你还在尝试，就不算失败。