切换导航
简历
工具
演示
查询
导航菜单
服务端
30
前端
114
数据库
82
进阶开发
8
桌面程序
2
QA
15
软件使用
36
规范协议
5
操作系统
11
AI
0
复用资源
6
硬件
0
标签
HTML
正则表达式
Json
包管理工具
vite
CSS
XPath
JavaScript
Jquery
less
ES6
Vue
React
vue 3
Layui
editor.md
sea.js
Zepto.js
mysql.js
mssql.js
NodeJs
Express
前端template
YAML
杂项
外部链接
.NET Core SDK和运行时安装包
淘宝 NPM 镜像
查询网
Tables Generator线上表格转换工具
引用cdn在线脚本和样式
首页
前端
CSS 修改浏览器自带样式
[TOC] ## 1. 修改浏览器滚动条样式 以下样式可以兼容 Chrome、Safari、Edge、火狐和 Opera 等浏览器的滚动条样式。 ```CSS /* 宽度影响纵向滚动条宽度，高度影响横向滚动条的高度 */ ::-webkit-scrollbar { width: 10px; /* 设置滚动条宽度 */ height: 10px; /* 设置滚动条高度 */ background-color: #f1f1f1; /* 设置滚动条背景颜色 */ } ::-webkit-scrollbar-thumb { background-color: #888; /* 设置滚动条滑块颜色 */ } ::-webkit-scrollbar-thumb:active { background-color: #666; /* 设置滑块按下时的颜色 */ } /* 当同时出现横向滚动条和纵向滚动条时，右下角相交地方的正方形小块 */ ::-webkit-scrollbar-corner { background-color: #ccc; /* 设置滚动条角落的颜色 */ } /* 滚动条中上下可点击的按钮，默认情况下是一个向下和向上的三角形图标 */ /* 注意：这里设置也需要同时设置宽高，最好宽高相等，宽度影响纵向滚动条按钮宽度，高度影响横向滚动条的按钮高度 */ ::-webkit-scrollbar-button { background-color: #ccc; /* 设置滚动条按钮的颜色 */ } ``` 在 WebKit 浏览器（Chrome、Edge、Safari）中，使用 ::-webkit-scrollbar-thumb 自定义滚动条样式时，opacity 属性不会生效。这是因为浏览器对滚动条伪元素的支持有限，只允许一部分与“外观”相关的 CSS 属性，例如： + background / background-color + border / border-radius + box-shadow + width / height（针对滚动条本身） 而 opacity、transition、transform 等属性不在支持列表中，直接设置会被浏览器忽略 > 如果要给滚动条设置透明度，可以是用 background: rgba(0, 0, 0, 0.05); 方式 ## 2. 统一浏览器IE11和Chorme按钮样式 **按钮样式在Chrome和IE11中不一致的问题分析** 按钮在Chrome和IE11中显示不一致通常是由浏览器默认样式差异、盒模型差异或CSS解析差异导致的。针对你的问题，我发现以下可能的原因： 1. **盒模型差异**：IE11默认使用怪异盒模型，而Chrome使用标准盒模型 2. **浏览器前缀缺失**：某些CSS属性需要特定浏览器前缀 3. **默认样式覆盖不完全**：不同浏览器对button有不同的默认样式 4. **IE11对盒模型和内边距的处理方式** 下面是一个解决方案，通过重置样式、明确盒模型和添加浏览器前缀来解决这个问题： ```html <!DOCTYPE html> <html> <head> <style> /* 全局重置样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 按钮基础样式 */ button { /* 重置默认样式 */ -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background: none; cursor: pointer; /* 统一盒模型 */ box-sizing: border-box; /* 按钮样式 */ padding: 10px 20px; background-color: #4CAF50; color: white; font-size: 16px; border-radius: 4px; /* 添加浏览器前缀 */ -webkit-border-radius: 4px; -moz-border-radius: 4px; /* 处理IE11特定问题 */ overflow: visible; /* 防止IE11中内边距失效 */ width: auto; /* 修复IE11中按钮宽度问题 */ } /* 悬停效果 */ button:hover { background-color: #45a049; } /* 激活效果 */ button:active { background-color: #3d8b40; } </style> </head> <body> <button>测试按钮</button> </body> </html> ``` 这个解决方案的关键点： 1. **盒模型统一**：通过`box-sizing: border-box`确保所有元素使用相同的盒模型计算方式 2. **默认样式重置**：使用`appearance: none`移除浏览器默认样式 3. **IE11特定修复**：添加`overflow: visible`和`width: auto`解决IE11的内边距问题 4. **浏览器前缀**：添加了必要的-webkit和-moz前缀
扫一扫手机看
点击排行
windows 文件资源管理器使用
Layui 弹窗open使用说明
SQL Server 中字符串函数使用
C# 使用QQ邮箱代理做邮件接收功能
SQL Server关于apply的两种形式cross apply 和 outer apply
ASP.NET MVC 模型的自定义验证
nvm安装及常用命令
SQL Server 中数据类型转换
SQL Server 中WITH AS短语的使用
IE浏览器下AJAX缓存问题导致数据不更新的解决办法
订阅号
