时间:2021-07-01 10:21:17 帮助过:10人阅读
a、chrome下input和textarea的聚焦边框
input,button,select,textarea{outline:none}
b、取消chrome下textarea可拖动放大
textarea{resize:none}
c、解决chrome下input,textarea自动填充后有黄色背景
input:-webkit-autofill , textarea:-webkit-autofill , select:-webkit-autofill{
-webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
}
.demo:after{content:".";display:block;height:0;overflow:hidden;clear:both;visibility:visible;}
.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari 和 Chrome */
border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类,只黑色阴影有效 */
}
.htc文件是个脚本文件,可以用来描述web行为,ie-css3.htc让IE浏览器支持CSS3的一些属性,其工作原理是用VML(将图形数据矢量化的标记语言)。
使用时要注意:
相关博客:http://www.zhangxinxu.com/wordpress/?p=783
另外:
behavior:
Behavior(行为)是IE5.0推出的东西,它的功能非常强大,结合样式表,可以给任何HTML对象增加行为(新的属性、方法、事件)
url ( url ) | : | 使用绝对或相对 url 地址指定DHTML行为组件(.htc) |
url ( #objID ) | : | 使用二进制实现(作为 ActiveX?/STRONG> 控件)的行为。此处的 #objID 为 object 对象的id 属性值 |
url ( #default#behaviorName ) | : | IE的默认行为。由行为的名称标识( #behaviorName )指定 |
4、background-size兼容
a、参数
background-size:contain; // 缩小图片来适应元素的尺寸(保持像素的长宽比);
background-size :cover; // 扩展图片来填满元素(保持像素的长宽比);
background-size :100px 100px; // 调整图片到指定大小;
background-size :50% 100%; // 调整图片到指定大小,百分比相对于包含元素的尺寸。
b、浏览器兼容:
IE 和遨游不支持;
Firefox 添加私有属性 -moz-background-size 支持;
Safari 和 Chrome 添加私有属性 -webkit-background-size 支持;
Opera 不支持 background-size 属性,添加其私有属性 -o-background-size 也不支持。
c、IE兼容代码:
html,body{width: 100%;}
.main-warp{
width: 100%;
background:url(../../images/mall/list/bj.jpg) no-repeat;
background-size: 100% 100%;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../images/mall/list/bj.jpg', sizingMethod='scale');
}
5、css绝对定位元素在页面居中
注意:必须设定height和width值
方法1:
div{ height:10%; width:30%; position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; }
方法2:
div{ height:10rem; width:30rem; position: absolute; left:50%; margin-left:-15rem; top:50%; margin-top:-5rem; }
display:table; 此元素会作为块级表格来显示(类似 display:table-cell; 此元素会作为一个表格单元格显示(类似 绝对、相对定位的元素,其父元素(包含块)为position:absolute;也可以,不是必须用position:relative。 如果包含块有宽、高限制,子元素超出部分会被遮挡住。包含块的父元素宽、高限制不影响。 相关连接:http://www.zhihu.com/question/19926700 设置字体的抗锯齿或者说光滑度的属性。 none ------ 对低像素的文本比较好 subpixel-antialiased ------默认值 antialiased ------抗锯齿 9、margin/padding-top/bottom 的百分比是按照 width 计算的 看到2种说法,比较赞同第一种。 (1)因为要构建在纵横两个方向上相同的 margin/padding。如果两个百分比的相对方式不同,那用百分比就无法得到垂直和水平一致的留白。CSS 的基本模型是着重于“排版”的需求,因此水平和垂直方向其实并不是同等权重的,更精确的说,是文字书写方向决定的。常见的横排文字时,我们排版的出发点是水平宽度一定,而垂直方向上是可以无限延展的。竖排文字则相反。所以在竖排文字时,margin/padding-* 其实就都按照 height 而不是 width 计算了。 (2)如果用height来计算,百分比*容器高度=padding-top(假设这是A等式),但是容器的高度=内容高度+padding-top(B等式),如果A成立能得到 padding-top, padding-top又影响到B等式,但B等式又是A等式的条件,是死循环。 因为img是inline-block,图片高度小于字体高度时,li行高受字体大小影响,图片按照字体高度的下边界对齐。 2种解决方法:1、li设置font-size:0; 2、图片设置display:block; 11、火狐中设置height:100%; 时,padding-bottom无效 兼容方法: 不设置padding-bottom,用after伪类的高度代替 12、设置overflow:scroll;后,子元素浮动失效 因为受滚动条的宽度影响,如果一定要有滚动效果,就给父元素外再套一个div,设置宽度后,overflow:hidden; 然后把父元素的宽增加大概20px 13、连续点击时,防止背景变蓝 ),表格前后带有换行符。
和 )
7、定位后遮挡
8、-webkit-font-smoothing
{
content:".";
height:0.9rem;
visibility:hidden;
display:block;
clear:both;
font-size: 0;
}
body{
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
user-select: none;
}
人气教程排行