当前位置： 首页 > news >正文

html常见兼容性问题

news 2026/3/28 12:24:47

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

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

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

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

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

1

#box{ float:left; width:10px; margin: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图片格式支持不好

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

相关文章：

html常见兼容性问题

1. png24位的图片在iE6浏览器上出现背景 解决方案&#xff1a;做成PNG8&#xff0c;也可以引用一段脚本处理. 2. 浏览器默认的margin和padding不同 解决方案&#xff1a;加一个全局的 *{margin:0;padding:0;} 来统一。 3. IE6双边距bug&#xff1a;在IE6下&#xff0c;如果对…...

编程日记 2023/8/20 21:18:00

Docker实战：docker compose 搭建Redis

1、配置文件准备 redis 配置文件&#xff1a;https://pan.baidu.com/s/1YreI9_1BMh8XRyyV9BH08g2、创建目录并赋权 mkdir -p /home/docker/redis/data /home/redis/logs /home/redis/conf chmod -R 777 /home/docker/redis/data* chmod -R 777 /home/docker/redis/logs*3、re…...

编程日记 2023/8/20 21:16:57

Debian11 Crontab

Crontab用户命令 可执行文件 crontab命令的可执行文件在哪儿&#xff1f; $ which -a crontab /usr/bin/crontab /bin/crontabcrontab命令的可执行文件有2个&#xff1a;/usr/bin/crontab 和 /bin/crontab $ diff /usr/bin/crontab /bin/crontab $diff 发现这两个文件并无区…...

编程日记 2023/8/20 21:15:56

css 文字排版-平铺

序&#xff1a; 1、表格的宽度要有&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 2、容器不能是display:inline 3、扩展---》node全栈框架 代码 text-align-last: justify; width: 70px; display: inline-block; 主要是用于表单左侧文字排序&#xff01;...

编程日记 2023/8/20 21:14:55

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

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

编程日记 2023/8/20 21:13:54

Go 安装配置

介绍Ubuntu20.04 安装和配置Go 可以参考官网的这个为 Go 开发配置Visual Studio Code - Go on Azure | Microsoft Learn 1.安装Go 去这个地方下载Go https://go.dev/doc/install 如果之前安装过&#xff0c;可以参考这个&#xff08;没有可以忽略&#xff09; 下载完成后执…...

编程日记 2023/8/20 21:12:50

镜像底层原理详解和基于Docker file创建镜像

目录 一、镜像底层原理 1.联合文件系统(UnionFS) 2.镜像加载原理 3.为什么Docker里的centos的大小才200M? 二、Dockerfile 1.简介 2.Dockerfile操作常用命令 &#xff08;1&#xff09;FORM 镜像 &#xff08;2&#xff09;MAINTAINER 维护人信息 &#xff08;3&…...

编程日记 2023/8/20 21:11:49

k8s扩缩容与滚动更新

使用kubectl run创建应用 kubectl run kubernetes-bootcamp \> --imagedocker.io/jocatalin/kubernetes-bootcamp:v1 \> --port8080 端口暴露出去 kubectl expose pod kubernetes-bootcamp --type"NodePort" --port 8080 使用kubectl create创建应用 kubect…...

编程日记 2023/8/20 21:10:48

4.小程序的运行机制

启动过程 把小程序的代码包下载到本地解析app.json全局配置文件执行app.js小程序入口文件&#xff0c;调用App()创建小程序的实例渲染小程序首页小程序启动完成 页面渲染过程 加载解析页面的.json配置文件加载页面.wxml模板和.scss样式执行页面的.ts文件&#xff0c;调用Pag…...

编程日记 2023/8/20 21:09:46

基于 Vercel TiDB Serverless 的 chatbot

作者&#xff1a; shiyuhang0 原文来源&#xff1a; https://tidb.net/blog/7b5fcdc9 # 前言 TiDB Serverless 去年就有和 Vercel 的集成了&#xff0c;同时还有一个 bookstore template 方便大家体验。但个人感觉 bookstore 不够炫酷&#xff0c;借 2023 TiDB hackthon 的…...

编程日记 2023/8/20 21:08:44

Android 多渠道打包及VasDolly使用

目录 1.添加productFlavors的配置buildConfigFieldmanifestPlaceholdersresValue 2.设置apk文件的名称&#xff0c;便于识别3.添加vasdolly、添加gradle脚本&#xff08;windows&#xff09; 作用&#xff1a;一次性可以打多个apk包&#xff0c;名字、包名、logo等可以不相同。…...

编程日记 2023/8/20 21:07:43

LeetCode 42题：接雨水

题目 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,3,2,1,…...

编程日记 2023/8/20 21:06:42

spring boot 提示：程序包不存在，解决方法总结

背景&#xff1a; 之前出现过这样的问题&#xff0c;打包安装父项目就好了&#xff0c;今天改了一下代码&#xff0c;重新编译的时候&#xff0c;又出现了这样的情况&#xff0c;决定深度挖掘一下这里面的问题 spring boot 提示&#xff1a;程序包不存在&#xff0c;解决方法总…...

编程日记 2023/8/20 21:05:41

docker项目实战

1、使用mysql:5.6和 owncloud 镜像&#xff0c;构建一个个人网盘 1&#xff09;拉取mysql:5.6和owncloud镜像 [rootmaster ~]# docker pull mysql:5.6 5.6: Pulling from library/mysql 35b2232c987e: Pull complete fc55c00e48f2: Pull complete 0030405130e3: Pull compl…...

编程日记 2023/8/20 21:04:39

银行客户关系管理系统springboot财务金融进销存java jsp源代码

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 银行客户关系管理系统springboot 系统有1权限&#x…...

编程日记 2023/8/20 21:03:37

Maven 插件 maven-antrun-plugin 执行 ant 脚本

Ant 相信大家都不陌生&#xff0c;你可以把它理解为使用 xml 格式描述的一系列命令处理工具。它是一种基于Java的build工具。理论上来说&#xff0c;它有些类似于&#xff08;Unix&#xff09;C中的make、有些类似于基于shell命令编写的sh脚本文件。Ant 用 Java 的类来扩展。&a…...

编程日记 2023/8/20 21:02:35

【仿写框架之仿写Tomact】四、封装HttpRequest对象（属性映射http请求报文）、HttpResponse对象（属性映射http响应报文）

文章目录 1、创建HttpRequest对象2、创建HttpResponse对象 1、创建HttpRequest对象 HttpRequest对象中的属性与HTTP协议中的内容对应&#xff0c;用于后序servlet从request中获取请求中的参数。 参照http请求报文&#xff1a; import java.io.BufferedReader; import java…...

编程日记 2023/8/20 21:01:33

LeetCode 41题：缺失的第一个正数

目录 题目 思路 代码 题目 给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,0] 输出&#xff1a;3示例 2&#xff…...

编程日记 2023/8/20 21:00:28

学单片机有什么用?

单片机简而言之就是一个小计算机系统&#xff0c;它已经应用到了我们生活中的方方面面。单片机比专用处理器适合应用于嵌入式系统&#xff0c;因此它得到了多的应用&#xff0c;事实上单片机是世界上数量多的计算机。 现代人类生活中所用的几乎每件电子和机械产品中都会集成有单…...

编程日记 2023/8/20 20:59:27

Go 1.21新增的 slices 包详解（二）

Go 1.21新增的 slices 包提供了很多和切片相关的函数&#xff0c;可以用于任何类型的切片。 slices.Delete 定义如下&#xff1a; func Delete[S ~[]E, E any](s S, i, j int) S 从 s 中删除元素 s[i:j]&#xff0c;返回修改后的切片。如果 s[i:j] 不是 s 的有效切片&#…...

编程日记 2023/8/20 20:58:26

3个场景解锁BongoCat：让呆萌猫咪成为你的终极桌面生产力伙伴

3个场景解锁BongoCat&#xff1a;让呆萌猫咪成为你的终极桌面生产力伙伴 【免费下载链接】BongoCat 让呆萌可爱的 Bongo Cat 陪伴你的键盘敲击与鼠标操作&#xff0c;每一次输入都充满趣味与活力&#xff01; 项目地址: https://gitcode.com/gh_mirrors/bong/BongoCat 在…...

编程新知 2026/3/28 11:43:33

3分钟掌握Mermaid：用代码思维绘制专业图表的核心技巧

3分钟掌握Mermaid&#xff1a;用代码思维绘制专业图表的核心技巧 【免费下载链接】mermaid mermaid-js/mermaid: 是一个用于生成图表和流程图的 Markdown 渲染器&#xff0c;支持多种图表类型和丰富的样式。适合对 Markdown、图表和流程图以及想要使用 Markdown 绘制图表和流程…...

编程新知 2026/3/28 11:19:21

Hearthstone-Script：炉石传说自动化脚本的革新实践

Hearthstone-Script&#xff1a;炉石传说自动化脚本的革新实践 【免费下载链接】Hearthstone-Script Hearthstone script&#xff08;炉石传说脚本&#xff09;&#xff08;2024.01.25停更至国服回归&#xff09; 项目地址: https://gitcode.com/gh_mirrors/he/Hearthstone-S…...

编程新知 2026/3/28 9:52:36

3大技巧：如何让旧Mac免费升级到最新macOS系统的完整方案

3大技巧&#xff1a;如何让旧Mac免费升级到最新macOS系统的完整方案 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 你是否有一台2012-2015年的旧款Mac&#xff0c;看着朋…...

编程新知 2026/3/28 9:34:25

EnCase、FTK还是取证大师？2024年主流电子取证工具横评与选型指南（附学习路径）

EnCase、FTK还是取证大师&#xff1f;2024年电子取证工具选型与职业发展全指南 当你的硬盘突然变成犯罪现场&#xff0c;键盘敲击声就是指纹&#xff0c;而每一串代码都可能成为呈堂证供——这就是电子取证专家的日常。在这个数据爆炸的时代&#xff0c;电子取证已从警方的技术…...

编程新知 2026/3/28 9:24:22

Spring Data JPA 高级特性

Spring Data JPA 高级特性 引言 大家好&#xff0c;今天想和大家聊聊 Spring Data JPA 的高级特性。作为一名 Java 架构师&#xff0c;我深知数据访问层对于应用的重要性。 Spring Data JPA 是 Spring 生态中用于简化数据访问的优秀框架&#xff0c;它提供了丰富的功能和灵活…...

编程新知 2026/3/28 8:21:47

python-flask-djangol框架的现代化动物园观光游览系统

目录技术选型与架构设计核心功能模块实现票务与游客管理智能化服务集成性能优化与测试部署与监控项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作技术选型与架构设计 采用Python的Flask或Django框架构建后端系统&#xff0c;具…...

编程新知 2026/3/28 7:57:26

ABAP开发避坑指南：绕过SAP GUI安全弹窗的5种编程方案实测

ABAP开发实战&#xff1a;5种绕过SAP GUI安全弹窗的编程方案深度解析 引言&#xff1a;SAP GUI安全机制的困境与突破 在SAP系统的日常开发与运维中&#xff0c;频繁出现的"系统试图创建文件"安全弹窗堪称ABAP开发者的噩梦。这种设计初衷为保护本地文件安全的机制&…...

编程新知 2026/3/28 6:54:52

Qwen-Image-2512-Pixel-Art-LoRA 模型v1.0 系列作品展：构建一个完整的像素风奇幻世界

Qwen-Image-2512-Pixel-Art-LoRA 模型v1.0 系列作品展&#xff1a;构建一个完整的像素风奇幻世界 朋友们&#xff0c;今天不聊代码&#xff0c;不聊部署&#xff0c;咱们来看点“好玩”的。最近我深度体验了Qwen-Image-2512-Pixel-Art-LoRA模型&#xff0c;它最让我惊喜的&…...

编程新知 2026/3/28 6:28:41

麦橘超然Flux控制台快速体验：输入文字秒出高清图片

麦橘超然Flux控制台快速体验&#xff1a;输入文字秒出高清图片 1. 为什么选择Flux控制台 如果你正在寻找一个简单高效的AI图像生成工具&#xff0c;麦橘超然Flux控制台值得考虑。这个基于DiffSynth-Studio构建的Web服务&#xff0c;集成了majicflus_v1模型&#xff0c;通过fl…...

编程新知 2026/3/28 6:14:30