前端浏览器常见兼容性问题及解决方案

2023-10-27

目录

1. 最常见的:每个浏览器的默认margin,padding大小都不同,当设置定位时会有些许差异。

 2. 图片默认有间距:当几个img标签放到一起时,有些浏览器会有默认间距,加上第一条的设置的通配符样式也无用。

 3. min-height问题:由于min-height本身就是一个不兼容的css属性,所以设置min-height不能被各个浏览器很好的兼容。

 4. 常见事件兼容性问题解决方案:[答案在这里哦](https://blog.csdn.net/qq_42357338/article/details/108010387)

 5. IE9以下浏览器不能使用opacity

 6. 边距重叠问题:当相邻的两个元素都设置了margin边距时,margin会取最大值,舍弃最小值。


1. 最常见的:每个浏览器的默认margin,padding大小都不同,当设置定位时会有些许差异。


解决方案:这也是最容易解决的, 在css样式文件中重置margin,padding

*{
    margin:0;
    padding:0;
}

 2. 图片默认有间距:当几个img标签放到一起时,有些浏览器会有默认间距,加上第一条的设置的通配符样式也无用。

解决方式:使用float属性让其浮动,消除间距


 3. min-height问题:由于min-height本身就是一个不兼容的css属性,所以设置min-height不能被各个浏览器很好的兼容。


 解决方案:如果需要设置一个最小宽度200px,需要进行如下设置:
 

.test{
    min-height:200px;
    height:auto !important;
    height:200px;
    overflow:visible;
}

 4. 常见事件兼容性问题解决方案:答案在这里哦


 5. IE9以下浏览器不能使用opacity


 解决方案:如下

 opacity: 0.5;
 filter: alpha(opacity = 50);
 filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

 6. 边距重叠问题:当相邻的两个元素都设置了margin边距时,margin会取最大值,舍弃最小值。


 解决方案:为了不让边重叠,可以给子元素增加一个父级元素,并设置父级元素为overflow:hidden

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端浏览器常见兼容性问题及解决方案 的相关文章

随机推荐

  • 联盟链走向何方

    联盟链技术哪家强 开源架构Fabric FISCO BCOS 以下简称 BCOS CITA 技术对比 出品 碳链价值研究院 01 摘要 第 46 届世界经济论坛达沃斯年会将区块链与人工智能 自动驾驶等一并列入 第四次工业革命 经济学人 曾在
  • qt5.5.1 移植4412的问题过程

    编译错误 WTF wtf unicode wchar UnicodeWchar h In function bool WTF Unicode isAlphanumeric UChar WTF wtf unicode wchar Unicod
  • 开源项目部署之悟CRM部署 PHP服务端版

    文章目录 前言 一 部署环境 二 部署流程 1 安装宝塔等基础环境 2 部署CRM 点击安装即可 在这里插入图片描述 https img blog csdnimg cn 4f83ede5d3f74343a927f8a641c25e19 pn
  • 助推打造全球研发中心城市

    阿里 社招 一面 面不动了 真的面不动了一 项目挑一个你觉得最有挑战性的细说 有些细节被质疑了 嘴在前面飞脑子在后面追 以后说每一句话都要小心 笑cry 二 八股1 聚簇索引和非 题解 检索产品名称和描述 一 select prod nam
  • 3D关键点检测(2020-2017)

    3D关键点检测 1 3D关键点检测之PoseDRL Deep Reinforcement Learning for Active Human Pose Estimation AAAI2020 这篇文章可能与我们通常所处理的姿态估计任务略有不
  • 【BEV】BEVDet

    BEVDet 解析 BEVDet 模型 bevdet r50 训练配置 Scale NMS 优化配置 推理记录 注册 随机种子 总结 BEVDet BEVDet继承于CenterPoint gt MVTwoStageDetector 模型实
  • 射频工程师笔记---射频通信基础

    文章更新或问题可关注本人公众号 回顾一下移动通信技术的发展 其实是互联网和通信技术的融合过程 在这个过程中 很多应用都在不断加入其中 比如计算机跟通信的融合产生了互联网 互联网跟手机的融合带来了移动互联网 手机可以看杂志 看视频 听音乐 于
  • SpringCLoud——服务的拆分和远程调用

    服务拆分 服务拆分注意事项 一般是根据功能的不同 将不同的服务按照功能的不同而分开 微服务拆分注意事项 不同微服务 不要重复开发相同业务 微服务数据独立 不要访问其他微服务的数据库 微服务可以将自己的业务暴露为接口 供其他微服务调用 远程调
  • C++ 数据结构与算法(五)(哈希表)

    哈希表 1 定义 哈希表 Hash table 也称散列表 是根据关键码的值而直接进行访问的数据结构 一般哈希表都是用来快速判断一个元素是否出现集合里 只需要在初始化时用哈希函数 hash function 将这些元素映射在哈希表的索引上
  • WJ的Direct3D简明教程2:Render-To-Texture

    转载请注明 来自http blog csdn net skyman 2001 Rendering to a texture is one of the advanced techniques in Direct3D On the one h
  • Unity绘制户型(一)

    户型绘制主要对象数据 点 线 面 部件 门窗 主要难点是通过绘制的点寻找闭合多边形 多边形的生成 3D墙体的生成 门窗要在墙体上留下孔洞这四个功能 这篇文章我只写前两个问题 后面来两个问题单独再写一篇文章 1 如何寻找闭合多边形 我的方法是
  • 内容管理系统测试实战

    使用django和restframework开发接口 使用postman测试接口 使用unittest和requests模块测试接口 目录 Django安装 Django Rest Framework 创建API应用 数据库迁移 创建超级管
  • C++11中pair的用法

    概述 pair可以将两个数据组合成一种数据类型 C 标准库中凡是必须返回两个值的函数都使用pair pair有两个成员变量 分别是first和second 由于使用的struct而不是class 因此可以直接访问pair的成员变量 基本用法
  • Python_某宝某东秒杀抢购

    纯学习分享 只用于学习用途 请勿用于任何商业用途 本人不承担任何责任 视频编写过程 某宝秒杀程序 某宝源码 from selenium import webdriver from selenium webdriver common by i
  • springboot配置shiro多项目实现session共享的详细步骤

    springboot配置shiro多项目实现session共享的详细步骤 项目的配置步骤我已写到另一篇文章中 shiro框架 多项目登录访问共享session的实现 springboot redis shiro 的实现项目已共享到GitHu
  • 关于Tomcat端口被占用的情况

    今天打开eclipse突然发现运行不了 报错的提示为 Several ports 8005 8080 8009 required by Tomcat v7 0 Server at localhost are already in use 有
  • Android studio遇到问题:Emulator: PANIC: Cannot find AVD system path. Please define ANDROID_SDK_ROOT

    前言 在使用android studio时 配置模拟器的时候一直在报错这个 然后网上找到问题 并实际解决了问题 在这里记录下 目录 问题原因 没有配置环境的情况下 是因为他默认找的是这个路径的AVD 问题很明显了 中文路径导致的 C Use
  • Vue路由 传参几种方式

    动态路由传参 path detail username name a component gt import components Detail vue
  • windows server 2012 安装gooderp

    概述 这是我安装的第一个erp系统 为什么选择gooderp 因为它是开源的 个人认为还是不错的一个erp系统 windows上安装完全是傻瓜式的安装 介绍下环境 我使用的是阿里云的windows server 2012 为了安全呢最好更新
  • 前端浏览器常见兼容性问题及解决方案

    目录 1 最常见的 每个浏览器的默认margin padding大小都不同 当设置定位时会有些许差异 2 图片默认有间距 当几个img标签放到一起时 有些浏览器会有默认间距 加上第一条的设置的通配符样式也无用 3 min height问题