前端

前端练习-大讲堂(2)

中午了=。= 等爸爸回来吃饭~先写点东西。

全局定义

清除浮动：在HTML里加上.clear-fix

1
2
3
4
5
6
7
8
9
10
11
.clear-fix:after
{
	content: "";
	display: table;
	clear: both;
}
.clear-fix 
{
	*zoom: 1;
}

为了IE6/7/8兼容性，解决:after不支持的问题，加上zoom:1;

兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决，有如下作用：
触发IE浏览器的haslayout
解决ie下的浮动，margin重叠等一些问题。

出处：CSS中zoom:1的作用 ，小标签大作用

这里又涉及到IE的haslayout属性：

什么是hasLayout？hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。
下列元素默认 hasLayout=true
<table> <td> <body> <img> <hr> <input> <select>
<textarea> <button> <iframe> <embed> <object> <applet> <marquee>
很多情况下，我们把 hasLayout的状态改成true， 就可以解决很大部分ie下显示的bug。

hasLayout属性不能直接设定，你只能通过设定一些特定的css属性来触发并改变 hasLayout 状态。下面列出可以触发hasLayout的一些CSS属性值。

display
启动haslayout的值:inline-block
取消hasLayout的值:其他值

width/height
启动hasLayout的值：除了auto以外的值
取消hasLayout的值：auto

position
启动hasLayout的值：absolute
取消hasLayout的值：static

float
启动hasLayout的值：left或right
取消hasLayout的值：none

zoom
启动hasLayout的值：有值
取消hasLayout的值：narmal或者空值
（zoom是微软IE专有属性，可以触发hasLayout但不会影响页面的显示效果。zoom: 1常用来除错，不过 ie 5对这个属性不支持。）

writing-mode: tb-rl 这也是微软专有的属性。 ie7还有一些额外的属性可以触发该属性（不完全列表）：
min-height: (任何值)
max-height: (任何值除了none)
min-width: (任何值)
max-width:(任何值除了none)
overflow: (任何值除了visible)
overflow-x: (任何值除了visible)
overflow-y: (任何值除了visible)
position: fixed
因元素hasLayout而导致的问题其实一般都很容易发现：往往是内容出现错位甚至完全不可见。

一般如果是因为layout而引起的显示不符期望效果的话，在ff下会表现正常，而在ie下会出现错误。这个时候可以尝试触发父容器及其中的子容器的haslayout属性，通常可以通过加上zoom: 1;来调试。直到找到了产生问题的元素，再进行针对性的修正。最好的办法是对这个元素设置尺寸属性。但是，有时不便指定尺寸属性的情况下，就只能寻找替代方案了。对于ie7 ，最好的办法是设置最小高度属性为0；这个技术是无害的，因为0本来就是这个属性的初始值。而且没有必要对其他浏览器隐藏这个属性。而对于ie6和更早版本中触发一个元素hasLayout的方法是在overflow属性是visible的情况下设置这个元素的高度属性为1%，然后对其他浏览器隐藏这个设置。这种技术就是著名的Holly hack。

认识hasLayout——IE浏览器css bug的一大罪恶根源

一些兼容性后面再写。

背景图片那里使用了定位：background: url(../images/corner-to-start.png) no-repeat 100% 0%; 使用百分比定位图片的位置：第一个是水平位置，第二个是垂直位置，左上角是0%,0%,右下角是100%,100%；也可以用像素值。
banner下面的一些像日程表的东西：用CSS画出来再放数据，不需要放图片。
在解决border显示的问题时想用margin-right: -1px。可耻的失败了=。= 后来还是弱弱的定义了不同的宽度~~。重构的时候要带笔和纸算一下，设计图是多少就是多少，不然距离不对又要重新调一遍。

悬挂对齐

图片里有一些是悬挂对齐，解决办法是设置margin-left和text-indent。注意在用的时候不要半角和全角一起用，统一好后一个字符就是1em了。向左悬挂3个字符就是margin-left: 3em; text-indent: -3em;
另外还有空格距离：使用的属性是word-spacing，字母之间的距离：letter-spacing。

背景渐变

1
2
3
4
background-color: #5CBA5C;
background-image: -webkit-linear-gradient(bottom, #51A34F, #61C360);
background-image: -moz-linear-gradient(bottom, #51A34F, #61C360);
background-image: -ms-linear-gradient(bottom, #51A34F, #61C360);

就是这个，解决兼容性要写一些前缀。
另外解决IE老版本的问题也定义一下背景颜色，不然就是空白了。
基本的语法其实有很多。不过都大同小异。现在只用到简单的线性渐变，其实也可以做出很丰富的效果来哒。
再说CSS3渐变——线性渐变

为了让一个块居中，记得定义宽度。。。。

兼容性

调试工具可以用IE11的开发者工具，可以选择文档模式，有5 7 8 9。作业要求是7开始。不过刚开始是从Chrome开始测试：
啊记不清了。好像是搜索框那里错位了。解决办法是定义好宽度。再向右浮动。
IE9：一开始就错位了( ╯□╰ ) 解决办法都是定义好宽度和高度，把头部的高度都定义了一遍，然后就没什么问题了。
IE8：错位的块定义宽度。有些是利用nth-child()选择器的就直接加个类改个CSS定义样式，也解决了。好像从这里开始原来的清除浮动不能用了，就给.clear-fix加上zoom:1;也解决了问题；另外CSS3的圆角阴影渐变什么的就开始不能显示出来。可以链接一些外部文件来解决这个问题。
IE7：到现在还是有个问题：在头部右边的搜索栏的下拉菜单总是错位，而且上面的p标签和form标签多了好多距离，margin-top失效。百度了解决办法用了zoom;height:1%也不能解决。。。先放在这里了。

分享到