HTML兼容性

这篇具有很好参考价值的文章主要介绍了HTML兼容性。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、兼容性

兼容性:页面在不同的浏览器中可能会显示不同。开发人员适配不同浏览器的过程就叫兼容性。

二、兼容问题

1. 在IE6下,子级的宽度会撑开父级设置好的宽度

提示:盒模型的计算一定要精确,否则IE浏览器可能会显示不同

<style>
        #box {
            width: 300px;
        }
        .left {
            width: 200px;
            background-color: red;
            height: 300px;
            float: left;
        }
        .right {
            width: 200px;
            float: right;
        }
        .div {
            width: 170px;
            height: 170px;
            padding: 15px;
            background: blue;

        }
    </style>
    <div id = "box">
        <div class="left"></div>
        <div class="right">
            <div class="div"></div>
        </div>
    </div>

2. IE6中,元素浮动,如果宽度需要内容撑开,需要给里面的块元素都添加浮动才可以

<style>
        #box {
            width: 400px;
        }
        .left {
            background: red;
            float: left;
        }
        .right {
            background: yellow;
            float: right;
        }
        h3{
            margin: 0;
            height: 40px;
            float: left;
        }
    </style>
    
    <div id = "box">
        <div class="left">
            <h3>左侧</h3>
        </div>
        <div class="right">
            <h3>右侧</h3>
        </div>
    </div>

3. 在IE6、7下,元素要通过浮动排在同一排,就需要给这行元素都加浮动

<style>
        #box {
            width: 400px;
        }
        .left {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .right {
            width: 200px;
            height: 100px;
            background: blue;
            /* margin-left: 100px; */
            float: left;
        }
    </style>
    
<div id = "box">
        <div class="left">
            <h3>左侧</h3>
        </div>
        <div class="right">
            <h3>右侧</h3>
        </div>
    </div>

4. 注意标签的嵌套规则

5. 在IE6下,元素的高度如果小于19px的时候,会被当成19px来处理,

解决方法:overflow:hidden;

6. 在IE6下不支持1px的 dotted 边框样式

解决方法:切背景平铺

7. hasLayout:在IE下大部分兼容性都是因为hasLayout属性的触发问题,尽量出发hasLayout属性,可以减少很多IE下的兼容性的问题。

在IE下父级有边框的时候,子元素的margin回失效
解决方法:触发父级的 hasLayout 属性

8. IE6下双边距的bug

在IE6下,块元素有浮动有横向的margin 的值的时候,横向的 margin 的值会扩大两倍

.box {
        width: 200px;
        height: 200px;
        background: red;
        float: left;
        margin: 100px;
        display: inline;
       }
<div class="box"></div>

margin-Left: 一行中左侧的第一个元素有双边距
margin-right: 一行中右侧的第一个元素有双边距

解决方法:display:inline;

9. 在IE6、7下,li 本身没有浮动, li 里面的内容有浮动,li 下会产生一个间隙

解决方法:

  1. 给li 加浮动
  2. 给li 加 vertical-align:top
  3. 在IE6下最小高度的bug 和 li 的间隙问题共存的时候,给li 加浮动, vertical-align 不好使
ul {
            margin: 0;
            padding: 0;
            list-style: none;
            width: 300px;
        }
        li {
            list-style: none;
            height: 30px;
            border: 1px solid #000;
            float: left;
            /* vertical-align: top;*/
        }
        a {
            width: 100px;
            height: 30px;
            float: left;
            background: red;
        }
        span {
            width: 100px;
            height: 30px;
            float: right;
            background: blue;
        }
<ul>
        <li>
            <a href="#"></a>
            <span></span>
        </li>
        <li>
            <a href="#"></a>
            <span></span>
        </li>
        <li>
            <a href="#"></a>
            <span></span>
        </li>
    </ul>

10. 在IE6,当一行子级元素宽度之和和父级的宽度相差超过3px,或者子级元素不满行的情况的时候,最后一行的子级元素的margin-bottom会失效

还没有解决方法,避免出现超过3px,和出现不满行的情况

.box {
            border: 10px solid red;
            width: 600px;
            overflow: hidden;
        }
        .box div {
            width: 100px;
            height: 100px;
            background: blue;
            border: 5px solid #000;
            margin: 20px;
            float: left;
            display: inline;
        }
<div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <!-- <div>4</div> -->
    </div>

11. 在IE6下的文字溢出bug

子元素的宽度和父级的宽度如果相差小于3px的时候,
两个浮动元素中间的注释或者内联元素,就会出现文字溢出,内联元素越多,溢出越多
解决办法:用div 把注释或者内联元素包起来

.box1 {
            width: 400px;
        }
        .left1 {
            float: left;
        }
        .right1 {
            float: right;
            width: 400px;
        }
<div class="box1">
        <div class="left1"></div>
        <!-- 上面是left部分-->
        <div>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="right1">右边的部分</div>
    </div>

12. 在IE6下,当浮动元素和绝对定位元素是兄弟关系的时候,绝对定位会失效

解决方法:
不让浮动元素和绝对定位元素是兄弟关系,用div 或者其它标签 把a标签包起来

.box2 {
            width: 200px;
            height: 200px;
            border: 1pc solid #000;
            position: relative;
        }
        .box2 a {
            position: absolute;
            width: 40px;
            height: 40px;
            background: red;
            right: 20px;
            top: 0px;
        }

        .box2 ul {
            width: 150px;
            height: 150px;
            background: yellow;
            margin: 0 0 0 50px;
            padding: 0;
            float: left;
            display: inline;
        }
        
<div class="box2">
        <ul></ul>
        <div>
            <a href="#"></a>
        </div>
    </div>

13. 在IE6、7下,子级元素有相对定位,父级overflow包不住子级元素

解决方法:给父级也加相对定位

.box3 {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            overflow: auto;
            position: relative;
        }
        .div3 {
            width: 150px;
            height: 300px;
            background: red;
            position: relative;
        }

<div class="box3">
        <div class="div3"></div>
    </div>

14. 在IE6下,如果绝对定位的父级的宽高是奇数的时候,子级元素的right 和 bottom 值会有1px的偏差

15. IE6透明度,使用filter 兼容透明度

opacity:0.5;
filter: alpha(opacity=50)

16. 在IE6、7下,输入型的表单标签控件 上下会有1px的间隙

解决方法:给input加浮动文章来源地址https://www.toymoban.com/news/detail-620297.html

17. 条件注释语句,适配低版本IE时常使用

<!--[if ie]>
        我是IE
    <![endif]-->
    <!--[if ie 6]>
        我是IE 6
    <![endif]-->
    <!--[if ie 7]>
        我是I7
    <![endif]-->
    <!--[if ie 8]>
        我是IE8
    <![endif]-->

到了这里,关于HTML兼容性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • h5逻辑_解决h5页面嵌入ios兼容性问题

    安全区域 如下图所示~ 蓝色部分为安全区域。处于安全区域内的内容不受圆角、齐刘海、小黑条的影响。 若是将h5页面嵌入app中,就需要进行适配— 让h5页面展示在安全区域内。 tips: 安全区域是在ios11之后并且是iPhoneX及以上机型才有的。 因此我们只需适配以上机型其余机型

    2024年02月14日
    浏览(79)
  • 解决前端浏览器兼容性问题

    解决前端浏览器兼容性问题时前端开发中的一项重要任务。以下是一些常用的方法来解决这类问题: 1、使用css前缀: 不同浏览器可能对某些CSS属性有不同的前缀要求。可以使用CSS前缀来覆盖不同浏览器的样式需求。例如,使用 -webkit 前缀来适配WebKit(Chrome、Safari)浏览器

    2024年02月09日
    浏览(47)
  • 【前端】vant组件移动端兼容性问题汇总

    记录使用vant组件开发过程中遇到的兼容性问题 问题截图: 解决方法: 模拟滚动触发日历组件的加载,在van-calendar上绑定@open=\\\"openCalendar\\\"事件 参考来源:vant 日历插件,部分全面屏手机显示不出来 解决方法: 更改挂载节点,在van-popup上加get-container=“body” 参考来源:vant兼容

    2024年02月10日
    浏览(52)
  • 前端浏览器的兼容性问题探讨和解决方案

    解决不同浏览器之间的兼容性问题,可以采取以下一些常用的解决方案: 使用 CSS Reset:不同浏览器对于默认样式的定义存在差异,使用 CSS Reset 可以将不同浏览器的默认样式重置为统一的基准样式,从而减少浏览器之间的差异。 使用 CSS Hack 或浏览器前缀:某些 CSS 属性或值

    2024年02月14日
    浏览(51)
  • 前端开发中常见的浏览器兼容性问题及解决方案

    提示:这里主要阐述浏览器兼容性产生的环境: 所谓的浏览器兼容性问题,是指 因为不同浏览器对同一段代码有着不同的解析,所造成页面显示效果不统一的情况。 为此,解决浏览器兼容,也成为了跨浏览器开发的一个核心问题。 当初微软不加入W3C,使得后者不采用IE的方

    2023年04月18日
    浏览(50)
  • 前端笔记10——Win7下node.js和npm版本兼容性问题解决。

    新版本node.js不支持WIN7。 Win7的电脑只能支持到Node v13.14.0。 可能之前装了新版本的node,删了重装后,导致运行npm命令老是提醒信息,说是不支持node版本。 npm does not support Node.js v13.14.0 可是显示版本正常 解决方法: 卸载node之后,在把npm和npm cache两个文件夹删掉。 删干净后再

    2024年02月15日
    浏览(61)
  • uniapp系列-超详细教你在uni-app+vue3里通过web-view组件传递信息打开H5页面写入localstorage并解决兼容性

    web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。 点击这里直达官网文档 点击这里下载我的代码demo 本文最下面还有一些 常见或者奇怪问题解决方案 哦~ 之前开发好的H5页面,不想重新开发,想要直接放进项目用

    2024年02月09日
    浏览(59)
  • X-admin经典前端后台管理模板,基于layui的轻量级前端后台管理框架,简单,兼容性好,面向所有层次的前后端程序

    简介 X-admin基于layui的轻量级前端后台管理框架,简单免费,兼容性好,面向所有层次的前后端程序。创立于2017年初,为了敏捷WEB应用开发和简化企业应用开发而诞生的。#X-admin从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。

    2024年02月16日
    浏览(63)
  • 如何开展兼容性测试?兼容性测试有什么作用?

    兼容性测试是指测试软件在特定的硬件平台上、不同的应用软件之间、不同的操作系统平台上、不同的网络等环境中是否能够很友好的运行的测试。兼容性测试是软件测试过程中必不可少的一个过程,没有兼容性测试的测试是不完整的测试,下面来分享怎么做兼容测试,希望

    2023年04月19日
    浏览(64)
  • CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)

    CSS3是用于为HTML文档添加样式和布局的最新版本的层叠样式表 (Cascading Style Sheets)。下面是一些常用的CSS3属性及其详细解释: border-radius:设置元素的边框圆角的半径。可以使用四个值设置四个不同的圆角半径,也可以只使用一个值来设置统一的圆角。 box-shadow:创建一个元

    2024年02月08日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包