关于css 的兼容设置 ----笔记
在开发网页的时候,由于浏览器的差异,会造成css 代码需要写不同的样式,才能适配大部分浏览器,这很烦,但是又不得不做,我把其中用得比较多的那些,做了一个归纳,放在这里,开发的时候,直接打开这里,复制粘贴就可以了,不必去百度或者谷歌查那些代码,这样可以节省一部分时间;
1. 其中个人用的比较多的,有以下这些:
border-radius
box-sizing
box-shadow
这里只是一部分,后续遇到了,再继续更新:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div.abox {
position: relative;
margin: 100px auto;
width: 200px;
height: 200px;
background: #ff0000; border: 1px solid #eee; border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%; box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box; box-shadow: 0px 0px 20px #000;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000; filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);
/*for ie6,7,8*/
-moz-box-shadow: 2px 2px 5px #969696;
/*firefox*/
-webkit-box-shadow: 2px 2px 5px #969696;
/*webkit*/
box-shadow: 2px 2px 5px #969696;
/*opera或ie9*/
}
</style>
</head>
<body>
<div class="abox"> </div>
</body>
</html>
效果图:
2. 修改input 框中的placeholder 的样式:下面以字体颜色为例,当然还可以修改大小,位置等等
/*修改提示文字的颜色*/ input::-webkit-input-placeholder { /* WebKit browsers */
color: red;
} input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: red;
} input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: red;
} input:-ms-input-placeholder { /* Internet Explorer 10+ */
color: red;
}
微信内部接口:
weixin://dl/business/?ticket=怎么生成获取的?微信接口api公开
weixin://dl/business/?ticket= 到底怎么生成的?调用以下接口
weixin://dl/scan 扫一扫
weixin://dl/feedback 反馈
weixin://dl/moments 朋友圈
weixin://dl/settings 设置
weixin://dl/notifications 消息通知设置
weixin://dl/chat 聊天设置
weixin://dl/general 通用设置
weixin://dl/officialaccounts 公众号
weixin://dl/games 游戏
weixin://dl/help 帮助
weixin://dl/feedback 反馈
weixin://dl/profile 个人信息
weixin://dl/features 功能插件
关于css 的兼容设置 ----笔记的更多相关文章
- IE 兼容问题笔记
IE 兼容问题笔记 解决IE11兼容HTML5 设置 document.body的一些用法以及js中的常见问题 flex布局浏览器兼容处理 ie8, ie9 css3 media媒体查询器用法总结 c ...
- ie6,ie7,ie8 css bug兼容解决记录
ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...
- css样式兼容不同浏览器问题解决办法
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...
- CSS权威指南学习笔记系列(1)CSS和文档
题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...
- 最全的CSS浏览器兼容问题(转至http://68design.net/Web-Guide/HTMLCSS/37154-1.html)
最全的CSS浏览器兼容问题 CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2 ...
- css js 兼容问题
js 兼容问题 1. document.form.item 问题问题:代码中存在 document.formName.item("itemName") 这样的语句,不能在FF下运 ...
- 最全的CSS浏览器兼容问题http://www.68design.net/Web-Guide/HTMLCSS/37154-1.html
最全的CSS浏览器兼容问题 来源:68design.net 作者:邓飞飞 2008年09月23日 14:17 网友评论:7条 点击:71865 CSS 对浏览器的兼容性有时让人很头疼,或许当你了解当中 ...
- CSS中兼容的一面-----Hack
国庆了,出去玩耍,也有好长时间没有更新博客了.. 今天就和大家共享一篇技术博文吧.. CSS中兼容的一面-----Hack技术大全 兼容范围: IE:6.0+,FireFox:2.0+,Opera 1 ...
- IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表
浏览器兼容问题一直是前段开发工程师比较头痛的问题,熟悉了里面的规则也就变得简单了,这里有一份资料可以分享给大家,大家平时开发过程中遵循这个规律的话,会变得轻松多了: 各浏览器CSS hack兼容表: ...
随机推荐
- Java高级特性 第10节 IDEA和Eclipse整合JUnit测试框架
一.IDEA整合Junit测试框架 1.安装插件 打开File菜单的下拉菜单settings[设置] : 点击左侧Plugins[插件]菜单 在输入框中输入JUnitGenerator 2.0,点击I ...
- go 的数据类型
bool string int int8 int16 int32(rune) int64 uint uint8(byte) uint16 uint32 uint64 uintptr:无符号整型,用于存 ...
- Go 常用命令
Go 常用命令 含义 go run file_name.go
- 如何去maven仓库下载jar包
Maven仓库地址 : http://search.maven.org/ https://mvnrepository.com/ 或者你直接百度搜索 : maven仓库 第一个就是 我现在想下载myba ...
- Windows2008 R2 X64 PHP环境搭建步骤
Windows2008 R2 X64 PHP环境搭建步骤: 下载:Mysql5.7.23.PHP5.6.Zend.XCahe 一.安装MYSQL.导入数据: 解压MYsql压缩包,并新建Data目录, ...
- Python解释器的安装
Python解释器的安装 作者:Eric 微信:loveoracle11g 下载Python Python-3.7.0(64-bit)下载链接地址: https://www.python.org/ft ...
- Linux7.2 UDEV
1. 生成规则文件 touch /etc/udev/rules.d/99-oracle-asmdevices.rules 或者 touch /usr/lib/udev/rules.d/99-oracl ...
- Altium Designer 放置机械孔
先放置一个圆弧,将圆选中:执行Tools -> Convert -> Create Board Cutout from Selected Primitives
- 分析RedisRDB和AOF两种持久化机制的工作原理及优劣势
一.RDB和AOF两种持久化机制的介绍 RDB持久化机制,对redis中的数据执行周期性的持久化 AOF机制对每条写入命令作为日志,以append-only(追加)的模式写入一个日志文件中,在redi ...
- WPF 耗时操作时,加载loging 动画 (BackgroundWorker 使用方法)
1.定义一个全局 BackgroundWorker private System.ComponentModel.BackgroundWorker bgMeet0; 2.设置执行耗时的任务为True b ...