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

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(使用前将#替换为@)

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

  • Chrome DevTools:计算样式与 css 规则不同?

    当我在 CSS 文件中定义 4px 时 我的 DOM 元素的 border top width 怎么可能是 0px 当我使用 Chrome DevTools 检查元素时 我发现计算的样式告诉 0px 而最上面的 css 规则是 4px 而且
  • a:active 不起作用

    我在这里很困惑 the a active不工作 但是 hover工作正常 我已经尝试了很多事情 但这个让我陷入困境 而且真的很令人困惑 我刚刚在表中添加了链接 我已将单元格添加到了类中 menu1 现在 当我访问活动页面时 活动链接不会突出
  • jquery覆盖加载栏div

    所以我有一个数据表 并且我正在使用 ajax 获取数据 当检索数据时 表中的数据消失并出现一个小的加载圆圈 我希望数据保留 我知道如何做到这一点 并且加载圆圈出现在表格的中心 不一定是垂直的 至少是水平的 以及稍微透明的背景阻挡稍微超出表格
  • 将单选按钮放置在图像上

    我试图在图像上的确切位置放置一些单选按钮 我已将两者都放在 Div 中 但我不知道下一步该怎么做 这是我想要放置单选按钮的位置 红色圆圈 到目前为止 这是我的代码 center display block margin left auto
  • 当鼠标悬停在链接上时,如何在链接旁边创建弹出框?

    这是我想要实现的 我的网页上显示了两个超链接 a href http foo com foo a a href http bar com bar a 我还有两个对 div 链接的描述 div foo means foo div div ba
  • stripe checkout css内容策略错误

    我正在尝试创建一种形式条纹结账 https stripe com docs checkout在我的 Ionic 应用程序中 我创建了一个指令 将表单植入到我的内容视图中 但是当我运行它时 CSS 因违反内容策略而失败 checkout js
  • @Font-face 不适用于 IOS

    我正在开发一个 WordPress 网站 并且在每个页面上都有一个 H1 标签作为该页面的标题 我正在使用 font face 的特殊字体 它在每个浏览器的 Windows 上都运行良好 但是当我切换到 Mac 时 它不会显示 h1 标签
  • :hover 状态在 iOS 上不会结束

    我有一个带有悬停状态的简单菜单
  • 如何使用 css 在标题的两侧放置实线? [复制]

    这个问题在这里已经有答案了 可能的重复 如何在标题文本上制作字段集图例样式的 背景线 https stackoverflow com questions 5985009 how can i make a fieldset legend st
  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式
  • 删除

    好的 我有一个小菜单栏 菜单内的三个元素还有更多的子菜单 但是菜单栏中的元素之间有不必要的间距 而且我创建的子菜单有不必要的背景宽度 我在代码中将其涂成白色以使读者理解 由于这种不必要的宽度 即使鼠标悬停在不可见的宽度上 在本例中为白色 本
  • 如何修复“没有这样的文件或目录,lstat 'scss/'”?

    我正在尝试遵循 youtube 上的简单教程他尝试使用终端运行 npm 脚本 sass 文件 当我执行命令时npm 运行 sass显示错误消息错误 ENOENT 没有这样的文件或目录 lstat scss 我认为问题在于文件的路径或文件的权
  • html 电子邮件内的背景图像 css - Gmail 不支持

    我想向我的用户发送如下所示的带有背景图像 css 的 html 正文电子邮件 div style width 500px height 1000px background color black background image none
  • 网站在 iPhone 屏幕右侧显示空白区域

    我遇到问题http eiglaw com http eiglaw com iPhone 屏幕右侧显示约 25 像素宽的空白 边框 我在 stackoverflow 上研究了这个问题 这些帖子是相关的 但是当我尝试提供的各种解决方案时 我无法
  • 如何在其他div id的悬停中使用div显示块

    如何打开div悬停时标记href tag 这是我在悬停 href 标签上显示 div 标签的代码 Services is id of href tag Services is id of div tag Service hover Serv
  • 滚动时的 CSS 背景模糊

    我有固定的背景图像 滚动时我希望图像变得模糊 我知道如何在 css 中进行模糊 但在特定的滚动位置进行 这是一个例子 https medium com good music f160ba9e6c52 https medium com goo
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • 合并 2 个大型 CSS 文件的有效方法

    我正在寻找一个可以合并 2 个大型 CSS 文件的工具 到目前为止我尝试过的所有方法 例如CSSMerge 都没有成功 其中一些只是随机删除属性 其他人则因 webkit 和 moz 等非标准属性而窒息 并给我错误 我还需要保留每条规则大小
  • 具有 100% 高度行和 Internet Explorer 9 的表格

    我有以下示例 div style height 150px background color AAAAFF div
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style

随机推荐

  • 联盟链走向何方

    联盟链技术哪家强 开源架构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问题