编写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. Python程序打包成exe的一些坑

    今天写了一个项目,Python项目,需要在win7上跑起来,我想,这不是简单的不行么,直接上Pyinstaller不就完了? 但是后来,我发觉我真是too young too simple. 为什么这 ...

  2. Data Structure Linked List: Function to check if a singly linked list is palindrome

    http://www.geeksforgeeks.org/function-to-check-if-a-singly-linked-list-is-palindrome/ 这里的reverse可以re ...

  3. INT(M)表示什么意思？

    根据官方文档描述,int(M)中的M表示数据显示的宽度,与实际存储的长度无关. 1.也就是int(3)和int(11)能够存储的数据是一样的,都是从-2147483648到2147483647(或者0 ...

  4. Vue mixins extends extend components

    mixins 调用方式: mixins: [mixin1, mixin2] 是对父组件的扩充,包括methods.components.directive等... 触发钩子函数时,先调用mixins的 ...

  5. 第二篇、css尺寸和边框

    一.尺寸和标签图 二.尺寸单位 %:百分比 in:英寸 cm:厘米 mm:毫米 pt:磅(点)(1pt等于1/72英寸) px:像素(计算机屏幕上的一个点) em:1em等于当前的字体尺寸,2em等于 ...

  6. C#实现对外部程序的调用操作

    测试工具,首先也是一个C#的程序,它的主要目的是: 1:获取上文应用程序的窗口句柄,继而获取TextBox句柄及Button句柄: 2:为TextBox随机填入一些字符: 3:模拟点击Button: ...

  7. Luogu-2657 [SCOI2009]windy数

    很少做数位\(dp\)的题,做道题学习一下吧. 记忆化搜索,\(f[10][10][2][2]\)分别记录当前位置,上一位数,是否有前导零和是否有大小上限. 题目要满足相邻两个数相差不小于2,如果有前 ...

  8. LINQ 学习路程 -- 查询操作 Join

    Join操作是将两个集合联合 Joining Operators Usage Join 将两个序列连接并返回结果集 GroupJoin 根据key将两个序列连接返回,像是SQL中的Left Join ...

  9. castle windsor学习-----How components are created

  10. 算法（Algorithms）第4版 练习 1.5.16

    Quick-find package com.qiusongde; import edu.princeton.cs.algs4.StdDraw; import edu.princeton.cs.alg ...