编写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. maven setting.xml 中文配置详解（全配置）

    春节假期在家养病,乘有时间整理了下之前的知识——知识贵在归纳总结. 参照了官方文档,针对其中的一些未描述详尽的内容翻查了不少资料,补充到了配置文件中,同时再加上一些说明.例子,方便查阅. 内容虽然比较 ...

  2. shell 脚本后台运行知识

    1. bash while01.py &      把脚本放在后台执行 2. ctl + c   停止执行前台执行中的脚本(不能停止在后台运行中的脚本) 3. ctl + z   暂停执行前台 ...

  3. 如何拯救一台glibc被干掉的Linux服务器

    原文: 如何拯救一台glibc被干掉的Linux服务器? 首先如果 libc.so.6 没有被删除, 直接使用LD_PRELOAD就可以恢复 LD_PRELOAD=/lib64/libc-2.12.s ...

  4. java深入探究04

    1.Http协议 tcp/ip关注的是客户端服务器之间数据是否传输成功 http协议:是在tcp/ip协议之间封装的一层协议关注的是传输格式是否规范 注意:系统自带的telent工具(远程访问工具)可 ...

  5. 算法（Algorithms）第4版 练习 1.3.41

    方法实现: //1.3.41 public Queue(Queue<Item> q) { Queue<Item> result = new Queue<Item>( ...

  6. 异步刷新页面的前进与后退的实现--pushState replaceState

    实现目标 页面的跳转(前进后退,点击等)不重新请求页面 页面URL与页面展现内容一致(符合人们对传统网页的认识) 在不支持的浏览器下降级成传统网页的方式 使用到的API history.state 当 ...

  7. string 中的 length函数 和size函数 返回值问题

    string 中的 length函数 和 size函数 的返回值  (  还有 char [ ] 中 测量字符串的  strlen 函数 ) 应该是 unsigned int 类型的 不可以 和 -1 ...

  8. Docker与LXC、虚拟化技术的区别——虚拟化技术本质上是在模拟硬件，Docker底层是LXC，本质都是cgroups是在直接操作硬件

    先说和虚拟化技术的区别: 难道虚拟技术就做不到吗? 不不不,虚拟技术也可以做到,但是会有一定程度的性能损失,灵活度也会下降.容器技术不是模仿硬件层次,而是 在Linux内核里使用cgroup和name ...

  9. queryRuner如何获得bean对象，当这个bean对象中包含其他对象的时候

    我们知道我们可以使用dbutil的QueryRunner下的query方法使用BeanHandler得到bean对象 但是,当我们在一个表和另一个表关联的时候,往往喜欢将另一个表的关联字段变成另一个b ...

  10. 基于zepto使用swipe.js制作轮播图demo

    在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用 它是一个纯javascript工具,不需 ...