编写html页面时常见的问题（一）

时间 2019-11-12

标签编写 html 页面常见的问题栏目 HTML 繁體版

原文原文链接

说到写页面，确定有不少人在刚接触编写页面这一块时遇到不少细节和兼容性的问题，那么在这里我总结一些常常遇到的小问题。但愿可以帮助学习页面搭建的初学者！css

虽说ie6不少公司都已经抛弃，可是我的认为，初学者想要学好页面的搭建，典型的兼容性仍是颇有必要知道的！因此这里我就先说ie6的一个经典的兼容性问题！html

ie6双边距问题 chrome

产生环境：当盒子外边距方向和浮动方向相同，在ie6浏览器中，必定会出现双倍边距问题浏览器

例如：css以下布局

<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以下学习

<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的盒子只使用了外边距，并无浮动；spa

在高版本浏览器预览的时，是没有问题的，以下：htm

可是若是在ie6下，同时使用浮动和外边距的盒子，而且方向相同的这个盒子就问出现双倍边距问题，以下：blog

这个就是双倍边距的问题！图片

解决办法：

在出现问题的盒子上加 _display:inline;这个属性，属性前面加上下划线，表示的是只有ie6去识别这个属性。

接下来就说说在ie浏览器中，一张图片假设有超级连接的话，在ie中显示的样式！

图片连接在ie中有边框

产生环境：给图片添加超级连接，而且有href属性

例如：一张图片不加超连接，一张图片加了超连接

<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以后，两个盒子一块儿掉下来了

这个就是外边距塌陷问题

解决办法：

一、给父级添加属性：overflow:hidden;(推荐使用)

二、给父级或子级添加浮动（有时候布局的搭建中，也是须要子级浮动，好比左右布局，这个时候就不存在外边距塌陷问题了）

三、给父级添加border属性（不推荐使用，由于咱们的盒子不少时候是不须要边框这个样式的）

但愿可以帮助初学者，同时也但愿大神多多指教，还有一些问题没来得及分享，其余的会尽快补上的哦！我从最基础的记录开始！