element-plus 按钮在一些浏览器中无法显示问题

2023-11-01

正常按钮样式:
在这里插入图片描述

在360浏览器或者chrome 88以下版本浏览器中的按钮样式:
在这里插入图片描述

分析:
:not 选择器的写法不兼容
在这里插入图片描述
:not(a, b) 这种伪类不支持

解决方案:
postcss-selector-not
插件文档地址
postcss一个插件,用来将css 4的伪类转换成css 3伪类。
PostCSS Selector Not transforms :not() W3C CSS level 4 pseudo classes to :not() CSS level 3 selectors following the Selectors 4 Specification.

将element-plus css 导入,并通过postcss 编译转换
cdn下载地址:https://cdnjs.cloudflare.com/ajax/libs/element-plus/2.2.1/index.min.css
根据匹配版本下载需要的css(包含组件样式)
postcss.config.js

module.exports {
   plugins: {
		tailwindcss: {},
		autoprefixer: {},
		'postcss-selector-not': {},
		cssnano: {} // 生产环境
	}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

element-plus 按钮在一些浏览器中无法显示问题 的相关文章

  • 更改离子搜索栏的占位符和清晰图标颜色不是全局的吗?

    我有两个离子搜索栏 我只需要更改其中之一的占位符和清除图标颜色
  • gwt 中的垂直居中

    如何使用垂直面板在 gwt 中垂直居中 或者请告诉我有什么方法可以进行垂直居中 如果你想直接使用VerticalPanel从代码中 您需要使用setVerticalAlignment HasVerticalAlignment ALIGN M
  • 由于绝对定位的抽屉,移动键盘可以向上推内容

    我正在制作一个带有 3 个抽屉的网站 元素绝对位于屏幕外 一个在左侧 一个在右侧 一个在底部 看看这里的网站 看看我在说什么https sjbuysse github io javascriting index html https sjb
  • 获取一行中的最后一个 li jQuery

    我们有一个简单的ul ul li some text li li some some text li li text more li li text here li ul ul text align center width 100px l
  • 使用 CSS 的样式选择选项

    我正在尝试使用 CSS 设置选择选项列表的样式 我希望列表的时间之间有更多的填充 因为它们似乎被压在一起 我尝试向选项元素添加填充 但这似乎不起作用 有任何想法吗 这是我的代码 HTML
  • 具有自定义设计的 ASP.NET 复选框

    有没有办法改变asp net复选框的ui样式 我试过这个 cabeceraCheckBoxNormal background url ig res Default images ig checkbox off gif no repeat c
  • 如何为多个元素添加Class?

    我正在使用这段 javascript 向多个元素添加一个类 我试图引用多个 div 并向它们添加类 它只适用于第一个 JavaScript
  • 具有客户端/服务器节点设置的 Webpack?

    我正在尝试为带有节点后端服务器的 Angular2 应用程序设置基于 webpack 的流程 经过几个小时的努力 我已经成功地让客户端愉快地构建了 但我现在不知道如何集成我的服务器构建 我的服务器使用生成器 因此必须以 ES6 为目标 并且
  • 如何将红色边框与必需的属性一起添加到输入字段?

    目前 如果输入字段带有required属性为空时 会显示浏览器默认的错误信息 如果我删除此属性 由于我的 JavaScript 代码 它将在输入字段上显示红色边框 我如何同时显示两者 form submit function e e pre
  • 正常显示截断的文本,但悬停时显示完整文本

    我有一个 div 里面有一段左右的文本 我希望它正常显示前几个单词 但在悬停时展开以显示全文 理想情况下 我想仅使用 CSS 来完成此操作 而不需要重复数据 这是我尝试过的 div 1 ONE div
  • 如何在asp.net背后的代码中获取css样式

    我需要从 asp net c 中的代码后面获取 css 样式 在网上没有找到解决方案 是否可以直接从 styles css 文件获取它 还是需要解决方法 我在我的网络应用程序中使用主题 但我还需要进行一些服务器处理 并且我需要 ccs 文件
  • CSS 样式在部分回发时停止工作

    在 ASP net C 应用程序中 我有一个带有自定义 css 的复选框 CSS 文件是 复选框
  • Twitter Bootstrap - 下拉菜单 - 箭头键不适用于 Firefox 中的输入标签

    要求 我想在带有用户名和密码字段的下拉菜单中放置一个登录表单 我可以做到这一点 除了以下问题之外 一切正常 Issue 打字时我无法使用箭头键 上 下 firefox 当输入位于下拉代码之外时 这很有效 这适用于其他浏览器 例如 googl
  • 节点 sass 无效 CSS

    node sass 是否支持 use 由于我收到此错误 SassError t family fonts 之后的 CSS 无效 预期的表达式 例如 1px 粗体 为 roboto 这是 Nav scss 的代码 nav width 100
  • CSS如何制作可滚动列表

    我正在尝试创建一个由标题和标题下方的项目列表组成的网页 我希望项目列表可以垂直滚动 我还希望网页占据整个窗口 但不要更大 目前我的问题是项目列表不可滚动 而是延伸到窗口底部下方很远 这导致窗口可滚动 应该做什么CSS属性位于html bod
  • 如何将两个 span 元素一个向左对齐,另一个向右对齐?

    我有两个 span 要素 span style margin right auto 2012 XYZ Corp All Rights Reserved span span style margin left auto Built with
  • 悬停 CSS 仅适用于 Chrome

    嘿 我正在尝试使用 CSS 悬停类 它在 Chrome 上运行良好 但在 Firefox 上运行不佳 任何帮助表示赞赏 这是我的 CSS albumbox labeltext visibility hidden albumbox hover
  • 伪元素的元素类型是什么?

  • 使用 webpack 导入目录中的所有 sass 文件

    我目前正在尝试使用 Webpack 捆绑我的所有文件 但我不知道在处理多个文件夹和 scss files 我曾经使用 grunt 来完成这些任务 这是我的文件夹结构的示例 functions mixin scss function scss
  • 从后面的代码添加外部 css 文件

    我有一个 CSS 文件 例如 SomeStyle css 我是否可以将此样式表文档从其代码隐藏应用到 aspx 页面 您可以将文字控件添加到标头控件中 Page Header Controls Add new System Web UI L

随机推荐

  • 《推荐系统实践》第二章 利用用户行为数据

    2 1 用户行为数据简介 在电子商务网站中行为主要包括网页浏览 购买 点击 评分和评论等 用户行为在个性化推荐系统中一般分两种 显性反馈行为 explicit feedback 和隐性反馈行为 implicit feedback 显性反馈行
  • ajax的responseText是什么东西

    你向ajax后台的程序发送xmlhttp请求的时候 后台程序接到请求会进行处理 处理结束后 可以返回一串数据给前台 这个就是responseText 一般在后台程序C 中是Response Write 字符串 php中使用的是echo 就是
  • JVM系列之类加载

    前言 虚拟机把描述类的数据从Class文件加载到内存 并对数据进行校验 转换解析和初始化 最终形成可以被虚拟机直接使用的Java类型 这个过程就称为JVM的类加载机制 今天我们主要从下面两个方面说下类加载 类加载时机和类加载过程 类加载时机
  • 单元测试打桩,通俗易懂解释。

    在软件开发中的单元测试过程中 单元测试打桩通常是一种模拟或替代正在被测试的组件或系统的策略 在单元测试打桩过程中 测试代码使用一个 虚拟 实现来替代掉实际组件或系统的某些部分 从而可以进行封闭式的测试 简单来说 单元测试打桩是一种 模拟卡
  • esp8266&点灯科技&arduino

    ESP8266 点灯科技 arduino esp8266实现温度传感器 利用超声波传感器测距与舵机控制 ESP8266驱动DS18B20 ESP8266与DS18B20的硬件连接 DS18B20引脚排列 3 读取一次DS18B20温度数据
  • 记录-跨域的形成和跨域方法

    1 什么是跨域 根据浏览器的同源策略 凡是发送请求Url的协议 域名 端口三者之间任意一与当前页面地址不同即为跨域 同源策略 同域名 domain或IP 同端口 同协议视为同一个域 一个域内的脚本仅仅具有本域内 的权限 可以理解为本域脚本只
  • 【原创】深度学习第18弹:基于MobileNet的手势识别

    一 链接 原创 深度学习第18弹 基于MobileNet的手势识别 二 效果视频 基于神经网络MobileNet的手势识别 个人网站 https www deepvisionzero com 微信公众号 DeepVisionZero
  • 如何求数组中两个元素的最小距离(两种方法)

    给定一个数组 数组中含有重复的元素 给定两个数字num1 num2 求这两个数字在数组中出现的位置的最小距离 分析 对数组双重遍历 找出最小距离 但是这种方法效率比较低 由于在求距离时只关心num1 num2这两个数 因此只需要对数组进行一
  • 嵌入式开发——常见的存储器分类和特性介绍

    1 存储器的组成 存储器大体上由 存储颗粒 控制电路 组成 存储颗粒负责存储数据 控制电路负责管理存储颗粒和对外交换数据 如果从存储颗粒上进行分类 就是以是否掉电丢失 是否随机寻址 是可读还是可写 是否需要初始化等标准进行分类 如果从控制电
  • 32_STM32内部温度传感器实验

    目录 内部温度传感器简介 STM32ADC对应引脚 内部温度传感器使用注意使用事项 开启内部温度传感器步骤 实验源码 内部温度传感器简介 内部温度传感器框图 从图上可以看出温度传感器可通过TSVREFR控制位连接到ADC的固定通道16 温度
  • hive update和delete报错Attempt to do update or delete using transaction manager

    转载自 levy cui 默认在hive中没有默认开启支持单条插入 update 更新以及删除 delete 操作 需要自己配置 而在默认情况下 当用户如果使用update和delete操作时 会出现如下情况 hive gt update
  • 灰度重心法提取光条纹中心

    灰度重心法提取激光光条纹中心其实是将光条纹截面的灰度值分布中的质心记作为光条纹的中心 在一列线激光中先利用极值法求取光强最大的一点gmax 然后确定一个阀值 gmax g 取10 20 在阈值两边判断大于 的元素 求出其重心位置作为光条纹的
  • Open3D (C++) 计算距离最大的点

    目录 一 概述 二 代码实现 三 结果展示 一 概述 给定一个点 求距离该点最远的点 二 代码实现 include
  • 2018年数学建模国赛A题题目、解题思路、matlab代码(四)

    题目 消防和金属冶金等行业常常需要工作人员在高温环境中作业 高温作业专用服装可以较好地吸收部分热量 使得工作人员体表温度不至于过高从而避免灼伤 所以高温作业服必不可少 通常作业服由三层材料构成 记为 I II III 层 其中 I 层与外界
  • vue2自定义插件

    1 新建插件文件夹 plugin 新建文件 index js index vue index vue
  • 8款让你轻松写出优秀年中总结的神器!

    又到年中总结的时候了 不知道怎么写总结呢 今天就给大家推荐8款写作神器 第一款 ChatGPT ChatGPT是由OpenAI创建的基于人工智能自然语言处理技术的系统 旨在进行自然流畅的对话并提供连贯且相关的回复 ChatGPT使用了GPT
  • 夜深人静学32系列16——RTC实时时钟

    RTC时钟 RTC 什么是RTC RTC结构框图 CubeMX配置 RTC代码配置 实战 简易时钟 任务要求 代码实现 实验结果 补充 唤醒功能配置 代码如下 RTC 什么是RTC RTC Real Time Clock 实时时钟 RTC是
  • Jmeter性能测试(性能测试,Jmeter使用与结果分析)

    每天进步一点点 关注我哦 每天分享测试技术文章 前言 一 性能测试 1 什么是性能测试 2 性能测试的重要性 3 性能指标 QPS和TPS QPS TPS 二 压测工具Jmeter 1 什么是Jmeter 2 Jmeter主要元件 3 下载
  • Cloudflare Worker 部署纯静态网站

    安装 Wrangler CLI npm i cloudflare wrangler g 或者 cargo install wrangler 创建一个空白网站模板 wrangler generate proj site ref 文档 http
  • element-plus 按钮在一些浏览器中无法显示问题

    正常按钮样式 在360浏览器或者chrome 88以下版本浏览器中的按钮样式 分析 not 选择器的写法不兼容 not a b 这种伪类不支持 解决方案 postcss selector not 插件文档地址 postcss一个插件 用来将