编写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. flex 特性

    flex grow 分配的比例是对整体,比如 A grow 3  B grow 4,A连同margin一块是3

  2. 小程序连接百度ai

    function getTextFromImage(res) { var access_token = '24.c649256d2e*****0.282335-11449805'; var url = ...

  3. 面向对象分析与设计（C++）课堂笔记

    第一次课: 对象是程序设计最基本的单元 对象:对象标识.属性.操作(对象标识又分为内部标识.外部标识) 三三制原则 继承:英文语义”is a kind of” 自动的拥有或隐含的复制 虚基类:解决多继 ...

  4. Data Structure Binary Tree: Convert an arbitrary Binary Tree to a tree that holds Children Sum Property

    http://www.geeksforgeeks.org/convert-an-arbitrary-binary-tree-to-a-tree-that-holds-children-sum-prop ...

  5. ibdata1文件非常大如何解决,ibdata单独存储

    启用独立表空间innodb_file_per_table(如果这个参数没有开启,mysql会将数据.索引.元数据都存入到ibdata中的) 数据表 表索引 MVCC(多版本并发控制)数据 回滚段 撤销 ...

  6. RabbitMQ之Exchange

    交换机的作用: 生产者发送消息不会向传统方式直接将消息投递到队列中,而是先将消息投递到交换机中,在由交换机转发到具体的队列,队列在将消息以推送或者拉取方式给消费者进行消费,这和我们之前学习Nginx有 ...

  7. Windows 7 比Windows XP 难用的功能

    Windows 7 的搜索功能做得实在难用,不仅慢,还经常搜不到文件(明明存在的文件却搜不到).相比Windows XP,这个功能差的太远了. Windows 7 的无线连网功能,即使设置为不要自动连 ...

  8. An Assembly Language

    BUFFER OVERFLOW 3 An Assembly Language Introduction Basic of x86 Architecture Assembly Language Comp ...

  9. 初步认识Express框架渲染视图

    给出一个简单的例子,讲述模板渲染的基础功能 在nodejs中使用express框架,默认的是ejs和jade渲染模板,以下是以ejs模板进行解析 1.ejs 模板安装 npm install ejs ...

  10. 分享知识-快乐自己：N及分类（双重循环、递归）实现

    实现多级分类: 1.双重 for 循环实现 N 及分类 /*** * 执行遍历 * * @param menus * 所有权限列表集合 * @param list * 指定角色查询到的 权限Id * ...