发表于： 2017-01-11 01:23:48
3 1254
今天完成的事情：看了angularjs权威教程angular服务和XHR与服务器通信部分的内容，接着回头补了补JQ的基础知识，小课堂听了天云师兄的CSS兼容性问题
明天计划完成的事情：继续补基础知识
遇到的问题：光看书效率不高，很多概念性的东西看过了但是不理解，还是要多找例子敲才行
收获：
1.
$digest循环
$digest将会遍历我们的$watch,然后检查是否有变化，这就是所谓的dirty-checking
2.
$parsers，下面是对这个的解释： 当用户同控制器进行交互,并且ngModelController中的$setViewValue()方法被调用时, $parsers数组中的函数会以流水线的形式被逐个调用。第一个$parse被调用后,执行结果会传 递给第二个$parse,以此类推。
这些函数可以对输入值进行转换,或者通过$setValidity()函数设置表单的合法性。 使用$parsers数组是实现自定义验证的途径之一。例如,假设我们想要确保输入值在某两个
数值之间,可以在$parsers数组中入栈一个新的函数,这个函数会在验证链中被调用。
$formatters：当绑定的ngModel值发生了变化,并经过$parsers数组中解析器的处理后,这个值会被传递 给$formatters流水线。同$parsers数组可以修改表单的合法性状态类似,$formatters中的函 数也可以修改并格式化这些值。
3.
promise是一种用异步方式处理值（或者非值）的方法。promise是对象，代表了一个函数最
终可能的返回值或者抛出的异常。在与远程对象打交道时，promise会非常有用，可以把它们看
作远程对象的一个代理。
4.css兼容性问题：
浏览器差异
1、ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效。
[注] 经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。
2、CSS透明问题
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
[注] 最好两个都写，并将opacity属性放在下面。
3、CSS圆角问题
IE：ie7以下版本不支持圆角。
FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。
[注] 圆角问题是CSS中的经典问题，建议使用JQuery框架集来设置圆角，让这些复杂的问题留给别人去想吧。不过jQuery的圆角只看到支持整个区域的圆角，没有支持边框的圆角，不过这个边框的圆角可以通过一些简单的手段来实现，下次有机会介绍下。
4、cursor:hand VS cursor:pointer
问题说明：firefox不支持hand，但ie支持pointer ，两者都是手形指示。
解决方法：统一使用pointer。
5、字体大小定义不同
对字体大小small的定义不同，Firefox中为13px，而IE中为16px，差别挺大。
解决方法：使用指定的字体大小如14px。
并列排列的多个元素（图片或者链接）的div和div之间，代码中的空格和回车在firefox中都会被忽略，而IE中却默认显示为空格（约3px）。
6、CSS双线凹凸边框
IE：border:2px outset;。
FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
7.浏览器bug
1、IE的双边距bug
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案：在这个div里面加上display:inline;
关于CSS中的问题实在太多了，甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。一个合乎发展的建议是，页面采用标准XHTML标准编写，较少使用table，CSS定义尽量依照标准DOM，同时兼顾IE、Firefox、Opera等主流浏览器。很多情况下，FF和 Opera的CSS解释标准更贴近CSS标准，也更具有规范性。
2.IE的空格bug
IE有个BUG，在处理伪类时，如果伪类的名称中带有连字符”-”，伪类名称后面就得跟一个空格，不然样式的定义就无效。而在FF中，加不加空格都可以正常处理。
二、CSS HACK的方法(新手可以看看，高手就当路过吧)
首先需要知道的是：
所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE7 专用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;
需要注意的是，代码的顺序一定不能颠倒了，要不又前功尽弃了。因为浏览器在解释程序的时候，如果重名的话，会用后面的覆盖前面的，就象给变量赋值一个道理，所以我们把通用的放前面，越专用的越放后面
#example {
height:100px; /* FF */
_height:200px; /* IE6 */
*+height:300px; /* IE7 */
}
解释一下代码：
读代码的时候，第一行height:100px; 大家都通用，IE6 IE7 FF 都显示100px
到了第二行*height:300px; FF不认识这个属性，IE6 IE7都认，所以FF还显示100px，而IE6 IE7把第一行得到的height属性给覆盖了，都显示300px
到了第三行_height:200px;只有IE6认识，所以IE6就又覆盖了在第二行得到的height,最终显示200px
这样，三个浏览器都有自己的height属性了，各玩各的去吧
三、使用IE专用的条件注释
〈!--其他浏览器 --〉
〈link rel="stylesheet" type="text/css" href="css.css" /〉
〈!--[if IE 7]〉
〈!-- 适合于IE7 --〉
〈link rel="stylesheet" type="text/css" href="ie7.css" /〉
〈![endif]--〉
〈!--[if lte IE 6]〉
〈!-- 适合于IE6及以下 --〉
〈link rel="stylesheet" type="text/css" href="ie.css" /〉
〈![endif]--〉
貌似要编三套css，我还没用过，先粘过来再说
IE的if条件Hack
1. 〈!--[if !IE]〉〈!--〉 除IE外都可识别 〈!--〈![endif]--〉
2. 〈!--[if IE]〉 所有的IE可识别 〈![endif]--〉
3. 〈!--[if IE 5.0]〉 只有IE5.0可以识别 〈![endif]--〉
4. 〈!--[if IE 5]〉 仅IE5.0与IE5.5可以识别 〈![endif]--〉
5. 〈!--[if gt IE 5.0]〉 IE5.0以及IE5.0以上版本都可以识别 〈![endif]--〉
6. 〈!--[if IE 6]〉 仅IE6可识别 〈![endif]--〉
7. 〈!--[if lt IE 6]〉 IE6以及IE6以下版本可识别 〈![endif]--〉
8. 〈!--[if gte IE 6]〉 IE6以及IE6以上版本可识别 〈![endif]--〉
9. 〈!--[if IE 7]〉 仅IE7可识别 〈![endif]--〉
10. 〈!--[if lt IE 7]〉 IE7以及IE7以下版本可识别 〈![endif]--〉
11. 〈!--[if gte IE 7]〉 IE7以及IE7以上版本可识别 〈![endif]—〉
五.float闭合
在父DIV的CSS中加上overflow:auto就搞定。但是不适用于IE，下来就要解决IE的问题了，再加上“_height:1%”，这个问题就完全解决了。
六、需要注意的一些兼容细节
1, FF下给 div 设置 padding 后会导致 width 和 height 增加(DIV的实际宽度=DIV宽+Padding), 但IE不会.
解决办法：给DIV设定IE、FF两个宽度，在IE的宽度前加上IE特有标记" * "号。
2, 页面居中问题.
body {TEXT-ALIGN: center;} 在IE下足够了，但FF下失效。
解决办法：加上"MARGIN-RIGHT: auto; MARGIN-LEFT: auto; "
3, 有的时候在IE6上看见一些奇怪的间隙，可我们高度明明设好了呀。
解决办法：试试在有空隙的DIV上加上"font-size:0px;"
4, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.
5, 浮动IE6产生的双倍距离
#box{ float:left;
width:100px;
margin:0 0 0 100px;
}
这种情况之下IE6会产生200px的距离
解决办法：加上display:inline，使浮动忽略
6 页面的最小宽度
IE不认min-属性
解决办法：为了让这一命令在IE上也能用，可以把一个〈div〉 放到 〈body〉 标签下，然后为div指定一个类：
然后CSS这样设计：
#container{
min-width: 600px;
width:expression(document.body.clientWidth 〈 600? “600px”: “auto” );
}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
7、UL和FORM标签的padding与margin
ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0；
解决办法：css中首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,后面就不会为这个头疼了.
返回列表
评论