编写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取值要一样，例如以下：不仅实现了单选，还实现了扩大点击的触发区域！

如果本文对你有帮助，记得推荐一下哦！

共勉！

编写html页面时常见的问题（转）的更多相关文章

  1. 编写html页面时常见的问题（二）

    这次我接着说几个编写页面时常见的另外几个问题. 不能水平居中对齐 在我们写页面的时候,会遇到一些小细节就是不能水平居中对齐,这种情况影响了页面的美观,这也是写页面的质量不过关的一个体现,其实这种情况的 ...

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

    说到写页面,肯定有很多人在刚接触编写页面这一块时遇到很多细节和兼容性的问题,那么在这里我总结一些经常遇到的小问题.希望能够帮助学习页面搭建的初学者! 虽然说ie6很多公司都已经抛弃,但是个人认为,初学 ...

  3. jsp编写页面时常见错误提示

    jsp编写页面时常见错误提示 404-->未部署web应用 500-->代码有问题 无法显示网页-->未启动tomcat webRoot-->URL输入有误 web-inf-- ...

  4. 使用Sublime编写HTML页面时发现，虽然已经设置好了UTF-8的编码格式，但却发现HTML页面的汉字仍然是乱码。

    相信有些同学在使用Sublime编写HTML页面时发现,虽然已经设置好了UTF-8的编码格式,但却发现HTML页面的汉字仍然是乱码吧.我今天就遇到了这样的问题. 第一步:重新设置一下你的meta,设置 ...

  5. include 指令和 include 动作引入 jsp 页面时中文乱码

    include指令:<%@ include file="new.jsp" %> include动作:<jsp:include page="new.jsp ...

  6. 刷新页面时 select值保持不变

    刷新页面时,要使下拉菜单(select).raido保持不变,用ajax是无法实现的.我想只能通过cookies才能实现.刷新前先把select或radio的值保存在cookies中,刷新后再填回去. ...

  7. JS-自制提速小工具：开发页面时需要按比例计算宽高值的快速计算器

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name= ...

  8. FireFox每次访问页面时检查最新版本

    FireFox每次访问页面时检查最新版本 浏览器都有自己的缓存机制,作为开发人员,每次js的修改都要清空缓存,显然很不方便.而firefox并没有提供ie那样的设置. 下面的方法就可以非常方便的设置f ...

  9. JavaScript当离开页面时可以进行的操作

    当JavaScript离开页面时可以进行的操作 window.onbeforeunload = function() { var email = document.getElementById(&qu ...

随机推荐

  1. 用cocos2d-html5做的消除类游戏《英雄爱消除》——概述

    在bbs.html5china.com论坛学习了MV和老马的小熊蘑菇后我也自己模仿他们做了这样子一个游戏,权当技术交流学习,现在附上游戏截图和源码. 游戏截图: 1.系统菜单界面: 2.游戏界面 3. ...

  2. Yii2发送短信验证码完全解决方案

    概述 在做项目的时候,需要用到短信发送验证码功能.不能不说Yii2的牛逼,很容易就搞定了.下面我整理一下具体功能和流程,分享给大家. 主要功能 通过Yii2 rules验证手机号 通过js验证是否为手 ...

  3. interface -- 接口类

    <?php /** *为了声明接口,需要使用关键字interface *interface IExampleInterface {} *说明(大多数开发人员选择在节后名称前加上大写字母I作为前缀 ...

  4. 超快的maven setting文件

    <?xml version="1.0"?> <settings> <localRepository>/home/yizhen/.m2/repos ...

  5. tkinter模块中常用的参数

    以下内容来自于:http://www.cnblogs.com/aland-1415/p/6849193.html(个别内容掺入了自己的重新整理) cnf={}与**kw: cnf={}这是一个默认参数 ...

  6. BZOJ 3391 [Usaco2004 Dec]Tree Cutting网络破坏：dfs【无根树 节点分枝子树大小】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3391 题意: 给你一棵无根树,求分支size均不大于一半点数的点. 题解: 假定1为根. ...

  7. iframe弹出层中关闭包含iframe的div（子页面调用父页面js函数）

    父页面: <div id="win2" style=" width:300px; height:200px; border:1px solid red;" ...

  8. IIS 高并发导致log记录不完全

    项目测试性能过程中,对于高并发测试过程中发现log记录缺失一部分,经过调查,找到了原因是因为IIS连接数的限制,经过修改连接数,成功完成.设置如下: “点击网站”->“右击切换到功能视图”-&g ...

  9. bzoj 3881: [Coci2015]Divljak AC自动机

    题目大意: http://www.lydsy.com/JudgeOnline/problem.php?id=3881 题解: 这道题我想出了三种做法,不过只有最后一种能过. 第一种: 首先我们把所有的 ...

  10. android开发 如何通过web服务器访问MYSQL数据库并且使其数据同步到android SQLite数据库？

    通过web服务器访问MYSQL数据库有以下几个过程: 1.在MySql下创建自己的数据库和自己的表单 2.连接数据库. 3.访问数据库 1.创建web工程 (服务器端) 在Myeclipse下新建一个 ...