日常css和js小知识点记录

2015-6-29

1.<meta name="viewport" content="width=device-width,user-scalable=no">设置屏幕宽度为设备宽度，禁止用户手动调整缩放

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

2.<meta content="telephone=no" name="format-detection">格式检测，手机号码不被显示为拨号链接
3.background-size:cover;把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
4.@media (min-width: 1440px){ 样式 }
@media (min-width: 1024px){ 样式 }媒体查询，做响应式布局的时候必要的东西，这是一些初始化设置
5.filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='img/xVfocus.jpg', sizingMethod='scale（缩放图片以适应对象的尺寸边界）');

2015-7-13:

1、谷歌浏览器，网页不支持字体小于12px；

在CSS中设置：-webkit-text-size-adjust: none;
(这段话可以加在body中，也可以单独加在具体样式中。)

2、ie6不支持min-height的解决方法；

css代码:min-height:500px;_height:500px;

3、解决IE6,IE7不能隐藏(overflow:hidden)绝对定位溢出的内容；

哪个需要设置overflow；hidden，生效，就在哪个父级上面设置position:relative;

4、谷歌、ie浏览器默认空格（&nbsp;）宽度不一的问题

设置相同字体 font-family:"宋体";

5、<div class="clear"></div>在ie6中存在默认空白问题；

.clear{font-size:0;line-height:0;height:0;}

6、块级元素上加悬停在ie6上不显示；

body{ behavior:url(csshover.htc);}

<!--[if lte IE 6]> <![endif]-->
IE6及其以下版本可见
<!--[if lte IE 7]> <![endif]-->
IE7及其以下版本可见
<!--[if IE 6]> <![endif]-->
只有IE6版本可见
<![if !IE]> <![endif]>
除了IE以外的版本
<!--[if lt IE 8]> <![endif]-->
IE8及其以下的版本可见
<!--[if gte IE 7]> <![endif]-->
IE7及其以下的版本可见
有需要压缩包的js可以问我要哦

7、png-24格式的背景图片在ie6中显示灰色；

< !--[if IE 6]><script src="DD_belatedPNG.js"></script><script> DD_belatedPNG.fix('.png_bg');</script><![endif]-->

引用函数是DD_belatedPNG.fix()，括号里的 *表示所有css选择器.png_bg 改成你的css选择器名称。
有需要js压缩包的可以问我要哦

8、圆形头像的制作兼容

圆形头像的制作原理就是在头像上覆盖一张透明的图片，把四个角颜色设置成页面的背景颜色，中间透明。
这里需要注意的是需要把图片保存成24位的png，虽然IE6支持8位的png的透明，但是8位的png做透明圆弧图片存在效果上的问题，就是存在白色的杂边或锯齿。24位的png或32位的png的圆弧透明（半透明）图片则非常光滑，但是该死的IE6不支持24位的png或32位的png透明(其他浏览器都支持)，需要我们额外的一下处理；使用 AlphaImageLoader就可以解决IE6不能显示24位和32位PNG的透明，
但使用 AlphaImageLoader 筛选器的元素必须有宽高，width:XXpx; height:XXpx;ie6下必须充值背景为none，_background:none

<style>
#test{position:relative; top:0; left:0;width:300px;height:300px;background:#000;}
#test span{position:absolute; top:0; left:0;width:200px;height:200px;background:url("路径/中间透明的图片.png");color:#fff;_background:none;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="路径/中间透明的图片.png
",sizingMethod="crop");}
</style>
<div id="test"><img src="图片地址" width="200" height="200" /><span></span></div>

9、使三列、两列div背景等高

补差等高法

<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>

.content{overflow:hidden;}
.left, .right{margin-bottom:-10000px;padding-bottom:10000px;}
这也是负margin的一个应用。这种方法是有一个缺点，就是当其中有出现锚点的时候，会出现锚点跳转错位的问题。
可能有的公司也会不让使用这个方法，因为margin、padding数值过大；

还有种折中的方法是使用背景图片达到页面基本的等高，这个大家应该懂得吧。

10、谷歌浏览器css hack解决（只有谷歌、苹果浏览器识别）

@media screen and (-webkit-min-device-pixel-ratio:0) {
/*这里放新建的CSS选择器*/
}

11.background-size的cover特定值会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。

12.若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核，增加标签：<meta name="renderer" content="ie-stand">

13.优先使用 IE 最新版本和 Chrome
copy<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

14.禁止文本域textarea拖动：resize: none;

15.网站变灰 CSS
body{
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter:gray;
}

16.在html中控制自动换行 :<td style="word-break:break-all">