日常开发IE浏览器的坑及解决方法总结(二)

Object.defineProperty 添加监听

IE浏览器不支持 Object.defineProperty。ie上写了先提醒缺少参数或者某个参数不能为false,然后去掉对应的参数就会显示不支持 Object.defineProperty 这是因为，IE浏览器有支持 Object.defineProperty ，但是值允许在操作DOM时使用，对于和vue中对于某个变量进行监听是不支持的。在网上找了一个 工具文件 ，地址是：https://gitee.com/ambit/object-defineproperty-ie ，使用之后确实在IE中不报错了，但是依然不能够监听一个变量，只能手动对IE浏览器做处理，使用JS判断当前浏览器版本及浏览器做相应的处理。
Object.defineProperty 使用方法：

记得后面一定要 调用：_pbj.data = number 及 number值就是我们要监听的值。

placeHoder问题

ie 浏览器不支持placeHoder属性，因为这是H5 的属性。
解决方法：

• 自己手动写对应的，把它当做input框的value值来写。
• 百度找了一个兼容IE浏览器的placeHolder属性的文件，直接引入：

但是本次的需求是，Input框获取焦点的的时候，提示文字消失，失去焦点，提示文字显示：

var onFocus = function ($el, text) {
	if ($el.val() == text) {
		$el.val("");
	}
}
var onBlur = function ($el, text) {
	if ($el.val() == ") {
		$el.val(text);
	}
};

iframe标签IE下总是出现滚动条问题：

iframe在一个div中，并且iframe高度与div一样，所以设置了iframe高度是100%，结果div出现了滚动条，在排除了padding、margin的因素外，还是有滚动条。
解决方案：

1. 父级div设置 font-size:0; .(子级里面是iframe)
2. iframe标签添加css属性 display:block; （使用此方法解决）
3. iframe标签添加css属性 vertical-aglin:top;

问题出现原因：
iframe=inline frame它是一个内联元素，默认是跟baseline对齐的，iframe后边有个看不见、摸不着的行内空白节点， 空白节点占据着高度，iframe与空白节点的基线对齐，导致了div被撑开，从而出现滚动条。
找到原因了，解决方案也就简单了。
第一种，设置iframe的vertical-align:top
第二种，设置父div的font-size:0，从而影响空白节点的line-height是0，从而不占据高度。
第三种，改变iframe的内联元素性质，改为块级元素，display:block

后续问题
行内元素带来空白节点，也带来inline-block 空白节点问题。
上述解释有点笼统，关于line-height和vertical-align（top、baseline）的详细功能，还得继续研究。

参考
http://stackoverflow.com/questions/9129182/iframe-100-height-causes-vertical-scrollbar
http://www.w3school.com.cn/cssref/pr_dim_line-height.asp
http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp
http://www.cnblogs.com/dolphinX/p/3236686.html