日常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瀏覽器默認空格（ ）寬度不一的問題
設置相同字體 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">
轉載于:https://www.cnblogs.com/dazhangli/p/4742538.html
總結
以上是生活随笔為你收集整理的日常css和js小知识点记录的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： htmlcss小白标签篇
- 下一篇： 20230220华南金牌主板u盘启动