标签归档:-webkit-

修改输入框placeholder文字默认颜色-webkit-input-placeholder

html5为input添加了原生的占位符属性placeholder,高级浏览器都支持这个属性,例如:

<input type="text" placeholder="我爱北京天安门" value=" ">

默认的placeholder字体颜色是呈浅灰色,如果想改变这个默认颜色,解决方案如下:

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #f00;  
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #f00;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #f00;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #f00;
}

以上代码摘自Bootstrap框架的bootstrap.css

ie6/ie7/ie8/ie9/ie10+和firefox和google chrome等一票浏览器hack方式整理

看标题就可以感觉到随着浏览器家族的不断膨胀,随之而来的前端开发兼容处理也貌似愈加复杂,嗯!貌似愈加复杂,其实整理一下也只是换汤不换药,今天整理两套hack方式,个人喜欢第二种,但是要先介绍第一种。

一.嵌入式hack方式(不推荐)

所谓嵌入式hack就是最早被人们所使用的方式,在此只整理ie的hack,其余一票高级浏览器同入口式hack方式

_width: 100px;     /ie6/
*+width: 100px;    /ie7/
*width: 100px      /ie6、ie7/
width: 100px;    /ie8/
width: 100px\9;    /ie6、ie7、ie8/
/* 由于本人不喜欢这种hack所以没有继续测试ie9+浏览器hack */

二.入口式hack方式(推荐)

优点,入口处控制,各个浏览器hack代码耦合性低,便于维护,说白了就是看着舒服,想看实例就看0101后花园首页源代码

首先在源代码中将原有的<html>进行如下替换:

<!--[if lt IE 7 ]><html class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->

然后css代码如下,我想你一看就能理解,不做解释

.box {
    background-color: white;    /所有浏览器/
} 
.ie6 .box {
    background-color: brown;    /ie6浏览器/
}
.ie7 .box {
    background-color: green;    /ie7浏览器/
}
.ie8 .box {
    background-color: blue;     /ie8浏览器/
}
.ie9 .box {
    background-color: pink;     /ie9浏览器/
}
.ie .box {
    background-color: #CAF4ED; /所有ie浏览器/
}
@media all and (min-width:0) {
    background-color: black;   /非ie6、7、8的其余高级浏览器/
}
@media all and (-webkit-min-device-pixel-ratio:0) {
    background-color: red;     /Google Chrome、Safari等一票webkit内核浏览器/
}

入口式hack方式的优雅想必大家已经领会了吧^-^Y

 

CSS盒模型全面讲解,怪异模式盒模型,CSS3 box-sizing属性

今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理。

先不考虑css3的情况,盒模型一共有两种模式,一种是标准模式,另一种就是怪异模式

当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签,例如:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!DOCTYPE HTML>

以上几种DOCTYPE都是标准的文档类型,无论使用哪种模式完整定义DOCTYPE,都会触发标准模式,而如果DOCTYPE缺失则在ie6,ie7,ie8下将会触发怪异模式(quirks 模式)

首先定义一个div块用来演示标准模式和怪异模式的区别,以下是Css样式

.box {
    width: 200px;
    height: 200px;
    border: 20px solid black;
    padding: 50px;
    margin: 50px;
}

标准模式下的盒模型如下图所示,盒子总宽度/高度=width/height+padding+border+margin

标准模式盒模型

标准模式盒模型

在怪异模式下的盒模型如下图所示,盒子的总宽度和高度是包含内边距padding和边框border宽度在内的,盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

怪异模式盒模型

怪异模式盒模型

看到这里你应该对盒模型的两种模式有了清晰的认识,下面在此基础上介绍一下css3属性box-sizing;

box-sizing有两个值一个是content-box,另一个是border-box。

当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;

当设置为box-sizing:border-box时,将采用怪异模式解析计算;

目前使用此属性需要前缀如下:

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;

-webkit-text-size-adjust:none;解决Chrome下字号不能小于12px的问题

出于人道主义先放出解决方案:

给html添加css样式:html { -webkit-text-size-adjust:none; }

Google Chrome出于好意在中文版中默认强制字体最小为12px,无论设置10px还是11px都按照12px显示,因为当汉字小于12px的时候形状扭曲,已经不适合淫类阅读。

可但是!但可是!这阻挡不了那些奇葩设计湿必须要你把一个8px的“繁”字摆在页面上,所以Chrome提供此方案以救你于水火之中!

可但是!但可是!这样设置之后会有一个问题,就是当你和Ctrl滚页面的时候,正常情况下字体应该会随着变大变下,而设置 -webkit-text-size-adjust:none;后,字体只会显示你当前设置的字体大小,不会随着网页放大而变大了,这样对有需要放大网页观看的用户造成了不好的用户体验,所以不建议全局应用该属性,而是在需要的情况单独使用就好了。