HTML出现错位的问题

引起网页HTML显示错位的几个常见问题:

         1、在HTML代码中缺失元素的开始或结束标签

         2、CSS设置中对边界、填充或边框的设置超出了父级容器的范围

         3、CSS和HTML的编码不统一

         4、浏览器的解析问题(这个问题是最容易出现的,同时也是最难解决的)

以上4点大致可以归为引用网页HTML显示错位的元凶,现在,分别来讨论一下如何解决上述出现的4种问题

         1、在HTML代码中缺失元素的开始或结束标签

答:这个问题看似比较简单,但是也是大多数人最容易犯的问题,在现实的工作中,我们一般都是用开发工具,如Dreamweaver或Editplus等一些高级的编辑器,虽然这些工具在一定程度上减少了我们的工作量,但是随之出现的问题也多了起来,毕竟这些工具在做语法检测时,不可能做到像人工检查那样细致。所以当代码量达到一定的量的时候,就会乱,我们在修改其中内容时,如删除或修改都有可能只改了前一半,但是没有改后一半。出现这种情况,我们也要使用一些手段来应对,办法也很简单,那就是多写注释。(<!—此处是注释内容 -->)一个良好的代码工,对注释的要求也是非常高的。一个优秀的应用,同样也不可能少了注释。养成一样良好的书写习惯,为以后的工作奠定基础。

         2、CSS设置中对边界、填充或边框的设置超出了父级容器的范围

答:在解释这个问题之前,先让大家清楚一下子父级关系,如:

<div class=”layout”><!—布局div开始,该class样式中设置宽度为500px,高度为200px-->
    <table align=”center” border=”10” width=”500” height=”200”>
        <tr>
            <td>这里是内容</td>
        </tr>
    </table>
</div><!—布局div结束-->

 在上述代码中,div就为父级容器,而table就为子元素,看注释,在class样式中,明明对div设置的是宽500px,高200px;表格也设置的是宽500px,高200px。但是就是出现错位。是因为table中设置的border=”10”,这样就会为table的上下左右边框各加10px。所以实质上table的宽度为520px,高度为200px。这样一来,就超出了div的宽高,所以有可能会出现错位。修改方法,将div的宽高各加20px,或把table的宽高各减20px。

         3、CSS和HTML的编码不统一

答:这个问题出现的机率不大,但是也可能出现。废话少说,直奔主题,如CSS样式表文件的编码是GBK,而HTML的编码为UTF-8,这样你在HTML文件中使用link标签引用CSS样式表文件时,没错,但是在浏览器解析时会出错。原因有了,修改也很简单,将编码统一就OK了。步骤:记事本打开文件—另存为UTF-8(GBK)编码。

         4、浏览器的解析问题

答:这个问题是最容易出现的,因为在现实中我们所做的网站可能会在不同的浏览器下跑,所以这时候就得考虑浏览器的兼容性问题。先来解释一下浏览器不兼容是如何产生的,主流浏览器IE、Firefox、Google等,这些浏览器厂商为了让自己的浏览器的市场更广,所以不会去顾及标准,他们会以自己的解析为标准去解析HTML文件。这使得IE、Firefox、Google等浏览的解析标准是不同的,所以就产生了浏览器的不兼容。这是引起浏览器不兼容最原始的凶手,但是我们却改变不了这种现状,所以这点我们不考虑。我们要考虑的是规范自己的HTML和CSS代码。

  1. 规范HTML:这个相对来说比较容易,在HTML的头部都有一个DTD的约束,你只需要把这个DTD文件下载下来,然后查看这个DTD文件里的内容,这里面包含了一些HTML的书写规范,如一个页面中都可以出现哪些元素,这些元素都有哪些属性等等。只要将其看懂了,HTML自然也就规范了。在HTML规范这里要注意的是布局规范,好多朋友的代码看起来很强大,但其实上很乱。用了float后就要对父容器做出clear。
  2. 规范CSS:这个说起来比较困难,如CSS也是有许多不常见的写法的,如!important、_width:20px、max-height:60px等等一些比较怪异的写法。下面来一一解释。

a)         !important是改变优先级的,如有两个css文件同时定义了一个.layout{}的样式,但是其中的宽度不一样,一个是50px,一个是100px,这样写出来就会以后面调用那个起作用,但是你如果就想让前一个作用怎么办,加!important就可以了。写法:.layout{width:50px !important;}

b)         在样式前加下划线“_”,这是设置只在IE6内核浏览器下起作用的,有时候IE6和IE8显示效果不一样,就可以用这种方法来调试。写法:.layout{_width:20px;}

c)         Max和min,顾名思义,最大和最小。这种写法就是规定这个元素的最大值和最小值。如max-height就是说最大的高度是多少,如果不满最大值,则以height设置的为准。

d)         最后一点,在HTML中body,ul,ol,input,form,dd,dt,dl,h1,h2,h3,h4,h5,h6等元素默认是有margin和padding的。在用这前,我们可以将这些元素的margin和padding清0。

好了,说了这么多,希望HTML的爱好者们借鉴一下,也希望说的不对的地方,请大家提出宝贵的意见,帮助俊南多多提高自身能力。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏铭毅天下

实战 | Elasticsearch实现类Google高级检索

少废话,说正事。 一、高级检索的功能点 通过高级搜索配置搜索项,能更准确的过滤掉不相干信息,获取最想要的检索信息。 以Google搜索为例(截取核心片段):...

37610
来自专栏河湾欢儿的专栏

响应式布局流式布局

响应式布局:根据不同的尺寸适配 viewport width=device-width 设置视口的宽度等于设备的宽度,如果不设置的话,默认视口的宽度是980...

782
来自专栏听雨堂

【8】数据浏览表格的快速输出

阅读目录 用什么来展示数据列表? 表格还是列表? 表头 对表格输出的封装 生成表格的实例 功能的扩展 在页面数据和控件的自动交换机制中,我们通过Pa...

2045
来自专栏小曾

.Net,Dll扫盲篇,如何在VS中调试已经编译好的dll?

还需要在该dll右键,点击选中Enable Debugging,意思就是将该dll启动到可调试的状态。当你点击该选项的时候,这个插件会把这个dll的代码给转成本...

952
来自专栏Python爬虫与数据挖掘

如何利用BeautifulSoup选择器抓取京东网商品信息

昨天小编利用Python正则表达式爬取了京东网商品信息,看过代码的小伙伴们基本上都坐不住了,辣么多的规则和辣么长的代码,悲伤辣么大,实在是受不鸟了。不过小伙伴们...

522
来自专栏林焕彬的专栏

iPhone X 适配手Q H5 页面通用解决方案

对于手Q 中的各业务来说,受 Phone X 影响的 H5 页面挺多,应该采取什么快速有效的办法来应对呢?

5.3K6
来自专栏WebHub

移动前端兼容操作总结

手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑在安卓/IOS的各种尺寸设备上的兼容,这里总结的是针对移动端设备的页面,设计与前端实现怎样做能更好地适配不同...

563
来自专栏数据的力量

怎样快速搜索自己所需的资料?

972
来自专栏小巫技术博客

高效mac(二)

912
来自专栏HTML5学堂

网易NEC水平垂直居中

HTML5学堂:水平垂直居中在项目开发中可以算是比较常见的吧,所以之前也给大家分享了HTML+CSS水平垂直居中的实现方法。今天主要给大家分享网易NEC里面是如...

3395

扫码关注云+社区