编写html页面时常见的问题（转）
编写html页面时常见的问题（一）
说到写页面，肯定有很多人在刚接触编写页面这一块时遇到很多细节和兼容性的问题，那么在这里我总结一些经常遇到的小问题。希望能够帮助学习页面搭建的初学者！
虽然说ie6很多公司都已经抛弃，但是个人认为，初学者想要学好页面的搭建，典型的兼容性还是很有必要知道的！所以这里我就先说ie6的一个经典的兼容性问题！
ie6双边距问题
产生环境：当盒子外边距方向和浮动方向相同，在ie6浏览器中，一定会出现双倍边距问题
例如：css如下
|
1
2
3
4
5
6
7
|
<style type="text/css"> .chrome,.ie{width:100px;height:100px;background:pink;} .ie{float:left;margin-left:100px;} .chrome{margin-left:100px;} .clearfix{clear:both;}</style> |
html如下
|
1
2
3
4
5
6
7
|
<body> <div style="margin:20px 0 0 20px;background:#ccc;height:500px;"> <div class="ie">ie6</div> <div class="clearfix"></div> <div class="chrome">高版本</div> </div></body> |
以上：类名为.ie的盒子不仅左浮动了，而且还使用左边的外边距；但是类名为.chrome的盒子只使用了外边距，并没有浮动；
在高版本浏览器预览的时，是没有问题的，如下：
但是如果在ie6下，同时使用浮动和外边距的盒子，并且方向相同的这个盒子就问出现双倍边距问题，如下：
这个就是双倍边距的问题！
解决办法：
在出现问题的盒子上加 _display:inline;这个属性，属性前面加上下划线，表示的是只有ie6去识别这个属性。
接下来就说说在ie浏览器中，一张图片假设有超级链接的话，在ie中显示的样式！
图片链接在ie中有边框
产生环境：给图片添加超级链接，并且有href属性
例如：一张图片不加超链接，一张图片加了超链接
|
1
2
3
4
|
<body><img src="1.jpg" width="230" height="225" /><a href="#" class="chrome"><img src="1.jpg" width="230" height="225" /></a></body> |
在其他浏览器中没什么问题，如下
但是在ie中，有超链接的图片就有问题了，如下
解决办法：
给img增加border:0;或者border:none;属性
当然，ie浏览器的兼容性越来越好了，所以在 win10中的 Microsoft edge 不存在这种问题！
接下来再说说一个在写页面时也是比较常见的一个问题，外边距塌陷的问题！
外边距塌陷的问题
产生环境：两个盒子嵌套会发生外边距塌陷
有时候，我们在搭建页面的时候，想要通过外边距margin-top来拉开内盒子与外盒子的距离，但是发现总会使内外两个盒子一起生效；
例如：原本父盒子与子盒子顶部紧挨着
现在要将红盒子距离父盒子距离顶部50px,红盒子（子级）使用margin-top之后，两个盒子一起掉下来了
这个就是外边距塌陷问题
解决办法：
1、给父级添加属性：overflow:hidden;(推荐使用)
2、给父级或子级添加浮动（有时候布局的搭建中，也是需要子级浮动，比如左右布局，这个时候就不存在外边距塌陷问题了）
3、给父级添加border属性（ 不推荐使用，因为我们的盒子很多时候是不需要边框这个样式的）
编写html页面时常见的问题（二）
这次我接着说几个编写页面时常见的另外几个问题。
不能水平居中对齐
在我们写页面的时候，会遇到一些小细节就是不能水平居中对齐，这种情况影响了页面的美观，这也是写页面的质量不过关的一个体现，其实这种情况的页面也有很多，说明写页面的人没有细节处理！例如下面看到的这种情况：就是单选按钮和文字不能水平居中
有的人会给按钮加一个margin-top,结果看到的是这样的，只是把整体距离顶部的距离拉开了，
可能大家也知道处理方法，但是就是觉得麻烦，一个好的页面，确实该麻烦的还是要麻烦，因为页面的美观真的很重要！！如果遇到一个盒子里面的两个对象不能很好的使用margin-top来细节调整的话
解决办法：就是分别让他们浮动，这个时候再使用margin-top就随心所欲了；这种方法在遇到左右对齐不能使用margin-top来控制的情况都比较实用，比如文字和输入框，或者两个并排的行内标签等都是用这种方式处理！
实现单选
既然说到了单选按钮，那我想接着说的是经常看到注册页面上，类似于性别的选择，只能选一种的方法，紧接着刚才的案例（为了简便理解，这里暂时没有处理左右对齐的问题）：
解决办法：通过对想要进行单选的这一组按钮添加一个属性name,并且他们的值都要一样,例如：name="sex";
如果是更多的单选选择，那么所有的都添name属性，并且值都一样就行
扩大点击的触发区域
很多时候我们会遇到一种情况，就是在点击单选或者复选框时候，我们点击它对应的文字也是可以被选中的，例如我选择"男"，男左边的按钮就会显示被选中，
解决办法：这个也是通过属性就可以实现的，可以给input添加一个id属性，并且给一个值，比如:id="nan";给他对应的文字用label标签环绕，并且给这个标签添加属性for,并且for的取值要跟input的id取值要一样，例如以下：不仅实现了单选，还实现了扩大点击的触发区域！
如果本文对你有帮助，记得推荐一下哦！
