html常见兼容性问题

1. png24位的图片在iE6浏览器上出现背景

解决方案:做成PNG8,也可以引用一段脚本处理.

2. 浏览器默认的margin和padding不同

解决方案:加一个全局的 *{margin:0;padding:0;} 来统一。

3. IE6双边距bug:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍。

1

#box{ float:leftwidth:10pxmargin:0 0 0 10px;} 

这种情况之下IE会产生20px的距离

解决方案:在float的标签样式控制中加入 _display:inline; 将其转化为行内属性。( _ 这个符号只有ie6会识别)

4. 渐进识别的方式,从总体中逐渐排除局部。 

首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。 

接着,再次使用 "+" 将IE8和IE7、IE6分离开来,这样IE8已经独立识别。

1

2

3

4

5

6

.bb{

    background-color:#f1ee18/*所有识别*/

    .background-color:#00deff\9/*IE6、7、8识别*/

    +background-color:#a200ff/*IE6、7识别*/

    _background-color:#1e0bd1/*IE6识别*/ 

5.IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute() 获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性

解决方法:统一通过getAttribute()获取自定义属性

6. IE下,event对象有 x、y 属性,但是没有 pageX、pageY属性; Firefox下,event对象有 pageX、pageY 属性,但是没有 x、y 属性

解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。

7. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示

解决方法:可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决

8. 超链接访问过后 hover 样式就不出现了,被点击访问过的超链接样式不在具有 hover 和 active 了

解决方法:改变CSS属性的排列顺序 L-V-H-A

1

2

3

4

a:link {}

a:visited {}

a:hover {}

a:active {}

9. 怪异模式问题:漏写 DTD 声明,Firefox 仍然会按照标准模式来解析网页,但在 IE 中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦,最好养成书写 DTD 声明的好习惯。现在可以使用[html5](http://www.w3.org/TR/html5/single-page.html) 推荐的写法:<!DOCTYPE html>

10. 上下margin重合问题:ie和ff都存在,相邻的两个div的margin-left和margin-right不会重合,但是margin-top和margin-bottom却会发生重合。

解决方法:养成良好的代码编写习惯,同时采用margin-top或者同时采用margin-bottom。

11. ie6对png图片格式支持不好

解决方案:引用一段脚本处理

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

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

相关文章

vue3生命周期

原理 vue3也提供了Composition API形式的生命周期钩子&#xff0c;与vue2.x中钩子对应关系如下&#xff1a; beforeCreate setup&#xff08;&#xff09; created setup&#xff08;&#xff09; beforeMountonBeforeMount mountedonMounted beforeUpdateonBeforeUpdate updat…

【华为OD机试】单词重量【2023 B卷|100分】

【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 每个句子由多个单词组成,句子中的每个单词的长度都可能不一样, 我们假设每个单词的长度Ni为该单词的重量,你需要做的就是给出整个句子的平均重量V。 输入描述 无 输出描述 无 样例1…

docker的安装与基础使用

一.docker简介 1&#xff09;什么是docker Docker是一种用于构建、打包和运行应用程序的开源平台。它基于操作系统级虚拟化技术&#xff0c;可以将应用程序和其依赖的库、环境等资源打包到一个可移植的容器中&#xff0c;形成一个轻量级、独立的可执行单元。 开发者在本地编…

MySQL流程控制

流程控制 顺序结构&#xff1a; 程序从上往下依次执行分支结构&#xff1a; 程序按条件进行选择执行&#xff0c;从两条或多条路径中选择一条执行。循环结构&#xff1a; 程序满足一定条件下&#xff0c;重复执行一组语句 针对于MySQL的流程控制语句主要有3类。注意&#xff…

Vulnhub系列靶机--- Hackadmeic.RTB1

系列&#xff1a;Hackademic&#xff08;此系列共2台&#xff09; 难度&#xff1a;初级 信息收集 主机发现 netdiscover -r 192.168.80.0/24端口扫描 nmap -A -p- 192.168.80.143访问80端口 使用指纹识别插件查看是WordPress 根据首页显示的内容&#xff0c;点击target 点击…

解决uniapp 二次登陆 登录页是首页时,登录页闪现问题

pages.json文件中&#xff0c;pages数组中第一项是登录页&#xff0c;用户第一次登录后&#xff0c;存储登录状态&#xff0c;以后再进入应用时&#xff0c;自动登录跳转至首页。 但是自动登录跳转至首页时&#xff0c;登录页总是会闪现一下。 第一步&#xff1a;manifest.js…

Python包sklearn画ROC曲线和PR曲线

前言 关于ROC和PR曲线的介绍请参考&#xff1a; 机器学习&#xff1a;准确率(Precision)、召回率(Recall)、F值(F-Measure)、ROC曲线、PR曲线 参考&#xff1a; Python下使用sklearn绘制ROC曲线&#xff08;超详细&#xff09; Python绘图|Python绘制ROC曲线和PR曲线 源码 …

webshell绕过

文章目录 webshell前置知识进阶绕过 webshell 前置知识 <?phpecho "A"^""; ?>运行结果 可以看到出来的结果是字符“&#xff01;”。 为什么会得到这个结果&#xff1f;是因为代码的“A”字符与“”字符产生了异或。 php中&#xff0c;两个变…

线程池原理

一、线程池的定义 线程池&#xff0c;按照配置参数&#xff08;核心线程数、最大线程数等&#xff09;创建并管理若干线程对象&#xff0c;没有任务的时候&#xff0c;这些线程都处于等待空闲状态。如果有新的线程任务&#xff0c;就分配一个空闲线程执行。如果所有线程都处于…

opencv进阶03-图像与鼠标的交互示例

在处理图像时&#xff0c;可能需要与当前正在处理的图像进行交互。OpenCV 提供了鼠标事件&#xff0c;使用户可以通过鼠标与图像交互。鼠标事件能够识别常用的鼠标操作&#xff0c;例如&#xff1a;针对不同按键的单击、双击&#xff0c;鼠标的滑动、拖曳等。 例如&#xff0c;…

【广州华锐视点】VR线上教学资源平台提供定制化虚拟现实学习内容

虚拟现实&#xff08;VR&#xff09;技术的出现为我们提供了一种全新的在线教学方式。由广州华锐视点开发的VR线上教学资源平台&#xff0c;作为一个综合性的学习工具&#xff0c;正在教育领域迅速发展&#xff0c;并被越来越多的教育机构和学生所接受。那么&#xff0c;VR线上…

kotlin获取输入

在 Kotlin 中&#xff0c;获取用户输入可以通过标准库中的 readLine() 函数来实现。这个函数允许你从控制台读取用户输入的文本&#xff0c;并将其作为字符串返回。下面是获取用户输入的详细步骤&#xff1a; 1. 使用 readLine() 函数获取用户输入 fun main() {println("…

把握潮流:服装定制小程序的发展与趋势

随着互联网的快速发展&#xff0c;小程序成为了人们生活中不可或缺的一部分。尤其在服装行业&#xff0c;定制化已经成为了一种趋势。为了满足消费者个性化的需求&#xff0c;服装定制小程序应运而生。 为了方便开发者的设计和制作&#xff0c;我们可以使用第三方的制作平台来创…

clickhouse新建服务器流程

1、sudo apt-get install -y apt-transport-https ca-certificates dirmngr 2、sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 8919F6BD2B48D754 3、echo "deb https://packages.clickhouse.com/deb stable main" | sudo tee /etc/apt/sour…

常见的跨域解决方案

常见的跨域解决方案&#xff1a; 跨域问题可以分为两种情况&#xff1a;前端跨域和后端跨域。以下是针对这两种情况的跨域解决方案&#xff1a; 前端跨域解决方案&#xff1a; JSONP&#xff1a; 适用于前端向不同域名下的服务器请求数据&#xff0c;通过添加回调函数名称来…

vscode + python

序 参考链接&#xff1a; 【教程】VScode中配置Python运行环境_哔哩哔哩_bilibili Python部分 Python Releases for Windows | Python.org vscode部分 Visual Studio Code - Code Editing. Redefined 一路next&#xff0c;全部勾上&#xff1a; 就可以了&#xff1a; 安装插…

优化GitHub网站访问慢的问题

方法一、修改host文件解决 大型网站服务器都不会是只有一台服务器,而是多台服务器组成的集群一起对外提供服务。 使用站长工具测速&#xff0c;找一个速度比较快的服务器。 图中可以看到140.82.121.4这个ip比较快&#xff0c; 下面修改hosts: Mac 在 /etc/hosts 中&#x…

stm32_ADC电源、通道、工作模式

0、ADC功能框图 1、ADC的电源 1.1、工作电源 VSSAVSS&#xff0c;VDDAVDD&#xff0c;简单来说&#xff0c;通常stm32是3.3V&#xff0c;ADC的工作电源也是3.3V&#xff1b; 1.2、参考电压 VREF和VREF-并不一定引出&#xff0c;取决于封装&#xff0c;如果没有引出则VREF连接到…

classloader的讲解

我们先从Activity的启动流程开始切入&#xff1a; //位于android/app/ActivityThread.java中 private Activity performLaunchActivity(ActivityClientRecord r, Intent customIntent) {// ........省略代码//通过反射创建activityjava.lang.ClassLoader cl appContext.getCl…

前端学习清单

顺序不分先后。 技术名称技术描述技术链接HTML5HTML5是下一代的HTML标准&#xff0c;是一种用于结构化内容的标记语言。MDN|HTMLCSS3CSS3是CSS技术的升级版本&#xff0c;它的最大好处就是可以让网页设计师更加方便的为网页添加各种各样的样式&#xff0c;而不用再局限于文字、…