HTML兼容性

文章目录

  • 一、兼容性
  • 二、兼容问题
      • 1. 在IE6下,子级的宽度会撑开父级设置好的宽度
      • 2. IE6中,元素浮动,如果宽度需要内容撑开,需要给里面的块元素都添加浮动才可以
      • 3. 在IE6、7下,元素要通过浮动排在同一排,就需要给这行元素都加浮动
      • 4. 注意标签的嵌套规则
      • 5. 在IE6下,元素的高度如果小于19px的时候,会被当成19px来处理,
      • 6. 在IE6下不支持1px的 dotted 边框样式
      • 7. hasLayout:在IE下大部分兼容性都是因为hasLayout属性的触发问题,尽量出发hasLayout属性,可以减少很多IE下的兼容性的问题。
      • 8. IE6下双边距的bug
      • 9. 在IE6、7下,li 本身没有浮动, li 里面的内容有浮动,li 下会产生一个间隙
      • 10. 在IE6,当一行子级元素宽度之和和父级的宽度相差超过3px,或者子级元素不满行的情况的时候,最后一行的子级元素的margin-bottom会失效
      • 11. 在IE6下的文字溢出bug
      • 12. 在IE6下,当浮动元素和绝对定位元素是兄弟关系的时候,绝对定位会失效
      • 13. 在IE6、7下,子级元素有相对定位,父级overflow包不住子级元素
      • 14. 在IE6下,如果绝对定位的父级的宽高是奇数的时候,子级元素的right 和 bottom 值会有1px的偏差
      • 15. IE6透明度,使用filter 兼容透明度
      • 16. 在IE6、7下,输入型的表单标签控件 上下会有1px的间隙
      • 17. 条件注释语句,适配低版本IE时常使用

一、兼容性

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

二、兼容问题

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加浮动

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/12516.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数学建模-蒙特卡洛模拟

%% 蒙特卡罗用于模拟三门问题 clear;clc %% &#xff08;1&#xff09;预备知识 % randi([a,b],m,n)函数可在指定区间[a,b]内随机取出大小为m*n的整数矩阵 randi([1,5],5,8) %在区间[1,5]内随机取出大小为5*8的整数矩阵 % 2 5 4 5 3 1 4 2 %…

(无人机方向)ros小白之键盘控制无人机(终端方式)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一&#xff1a;配置pycharm的ros开发环境二&#xff1a;核心代码讲解三 效果演示XTDrone 四 完整代码 前言 ubuntu 18.04 pycharm ros melodic 做一个在终端中…

微信小程序——同一控件的点击与长按事件共存的解决方案

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

植物一区HR | 植物生理组+转录组:揭示豆科植物响应干旱胁迫机制

PlantArray 植物高通量生理学表型监测系统 是一套以植物生理学为基础的高精度&#xff0c;高通量&#xff0c;自动化表型监测系统&#xff0c;集合实验设置、数据分析、决策工具于一身&#xff0c;能够高通量实时动态监测并进行全天候生理及环境参数采集&#xff0c;是进行植物…

网络设备中的配置文件管理

建立强大网络的第一步是为灾难和网络中断做好准备&#xff0c;许多企业在中断期间遭受损失&#xff0c;因为他们缺乏备份计划并且配置管理不达标&#xff0c;使用配置文件管理工具进行适当的配置文件管理不仅有助于处理网络中断&#xff0c;还有助于优化网络性能。 使用配置文…

海尔设计借助亚马逊云科技生成式AI,实现端到端的云上工业设计解决方案

海尔创新设计中心&#xff08;以下简称海尔设计&#xff09;成立于1994年&#xff0c;目前拥有400多名设计师&#xff0c;为海尔智家旗下七大品牌全球的所有产品提供设计创新和模式探索。亚马逊云科技为海尔设计提供了四个完整的云上解决方案&#xff0c;全面替代自有机房&…

Vue3 word如何转成pdf代码实现

&#x1f642;博主&#xff1a;锅盖哒 &#x1f642;文章核心&#xff1a;word如何转换pdf 目录 1.前端部分 2.后端部分 在Vue 3中&#xff0c;前端无法直接将Word文档转换为PDF&#xff0c;因为Word文档的解析和PDF的生成通常需要在后端进行。但是&#xff0c;你可以通过Vu…

HCIA 第二课总结

配置网络设备的明文密钥实验组网 实验拓扑 将一个路由器使用配置口进行连接 sys #进入系统视图模式 sysname RTA #给设备命名 user-interface console 0 #进入用户接口配置界面 authentication-mode password #配置认证模式为密钥认证 set authentication password ciphe…

百题千解计划【CSDN每日一练】订班服(附解析+多种实现方法:Python、Java、C、C++、C#、Go、JavaScript)

如果决意去做一件事了,就不要再问自己和别人值不值得,心甘情愿才能理所当然,理所当然才会义无反顾。 🎯作者主页: 追光者♂🔥 🌸个人简介: 💖[1] 计算机专业硕士研究生💖 🌟[2] 2022年度博客之星人工智能领域TOP4🌟 🏅[3] 阿里云社区特邀专…

LeetCode刷题笔记-287题寻找重复数

LeetCode 287 寻找重复数 难度&#xff1a;中等 题目&#xff1a; 给定一个包含 n 1 个整数的数组 nums &#xff0c;其数字都在 [1, n] 范围内&#xff08;包括 1 和 n&#xff09;&#xff0c;可知至少存在一个重复的整数。 假设 nums 只有 一个重复的整数 &#xff0c;返回…

软件外包开发测试管理工具

测试是软件工程中非常重要的一个环节&#xff0c;在上线前必须需要经过严格的测试才能确保上线后软件系统长时间运行。有大量的软件开发和测试管理工具&#xff0c;每一个工具都有自己的特点&#xff0c;今天和大家分享一些常见的工具&#xff0c;希望对大家有所帮助。北京木奇…

【Spring Boot丨序列化、反序列化】

序列化、反序列化 概述Jackson 序列化和反序列化简介自定义序列化器注册外部序列化程序&#xff1a; 指定类的 Json 序列化、反序列化 主页传送门&#xff1a;&#x1f4c0; 传送 概述 序列化是将对象转换为字节序列的过程&#xff0c;而反序列化则是将字节序列恢复为对象的过…

监听镜像版本变化触发 GitOps工作流

文章目录 前言工作流总览安装和配置 ArgoCD Image Updater创建 Image Pull Secret&#xff08;可选&#xff09;创建 Helm Chart 仓库创建 ArgoCD Application删除旧应用&#xff08;可选&#xff09;配置仓库访问权限创建 ArgoCD 应用 体验 GitOps 工作流总结 前言 在【GitOps…

基于Citespace、vosviewer、R语言的文献计量学可视化分析技术及全流程文献可视化SCI论文高效写作方法

文献计量学是指用数学和统计学的方法&#xff0c;定量地分析一切知识载体的交叉科学。它是集数学、统计学、文献学为一体&#xff0c;注重量化的综合性知识体系。特别是&#xff0c;信息可视化技术手段和方法的运用&#xff0c;可直观的展示主题的研究发展历程、研究现状、研究…

http 常见的响应状态码 ?

100——客户必须继续发出请求101——客户要求服务器根据请求转换HTTP协议版本200——交易成功201——提示知道新文件的URL202——接受和处理、但处理未完成203——返回信息不确定或不完整204——请求收到&#xff0c;但返回信息为空205——服务器完成了请求&#xff0c;用户代理…

【小波尺度谱】从分段离散小波变换计算小波尺度谱研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

用于系统监控及进程管理python库之psutil

前言 对于一个job级别应用再进行测试的过程中&#xff0c;不可避免测试该服务的一些性能&#xff0c;比如占有cpu的使用量&#xff0c;使用的memory的大小等&#xff0c;比较简单的方式是在服务中起一个并行的线程&#xff0c;每隔一段时间打印这些关注量的大小&#xff0c;之后…

服务器后台运行程序

代码运行 要让代码在服务器后台运行&#xff0c;有多种方法。在 Linux 系统中&#xff0c;最常见的有以下几种方式&#xff1a; **1. 使用 & 符号&#xff1a;** 在命令后面添加 & 符号可以让程序在后台运行。例如&#xff1a; bash python myscript.py &但是…

invalid use of incomplete type class ui(new Ui::MainWindow)报错,解决方案

invalid use of incomplete type class ui(new Ui::MainWindow报错&#xff0c;解决方案 原因解决方案 原因 就是在我改控件button的名字的时候&#xff0c;没有选中控件&#xff0c;导致吧mainwindow的名字改了。。。 解决方案 吧mainwindow的名字改回来 MainWindow 完美解…

element 级联 父传子

html代码例子 父组件 <el-cascaderstyle"width: 100%"change"unitIdChange":options"unitOptions"filterablev-model"formInline.unitId":props"unitProps"/></el-form-item>//改变级联传值到这个组件里面<r…