Tag: html

常用技巧和经验

各元素在浏览器的样式尽可能的与新标准保持一到处：

https://github.com/necolas/normalize.css
针对IE，其中的edge表示按照可用的最新模式显示

<meta http-equiv="X-UA-Compatible" content="IE-edge, chrome=1">

按窗口大小显示

<meta name="viewport" content="width=device-width, initial-scale=1">

如何去除iPhone上视频默认的播放按钮

在应用html5的video标签时，明明加了autoplay=”true”，可是在iPhone上打开时还会出现播放按钮，这时需要加一段CSS来进行去除(视频在具体的class或id内的请自行加入)：

video::-webkit-media-controls {display: none !important}

清除样式和浮动

在书写代码过程中，很多元素可能在不同浏览器中会自带margin,padding等样式以及自带浮动，可能过建立一个类似下面这样的通用的CSS代码来进行统一处理，避免实际展现效果出现偏差。

清除浮动可采取两种方法, clear:both或width:100%; overflow:hidden;

/*样式清除*/
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,id,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-size:12px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none; border:none; background:none;}
textarea{resize:none;}
a{text-decoration:none; color:#656565;}

/*清除浮动*/

.clearfix:after{content:""; display:block;clear:both;}
.clearfix{zoom:1;}

/*小技巧解决浮动问题*/
.fl{float:left;}
.fr{float:right;}

针对IE的小技巧

IE系列尤其是IE 6经常会出现样式问题，可通过IE Tester来进行查看，CSS Hack中一个重要的技术是可通过\9来将特别的样式仅对IE系列生效，如line-height:35px\9可用于解决IE 6中默认输入框(input)中文字垂直不居中问题，其中\9代表所有的IE系列浏览器。

解决IE6对PNG透明度不支持的问题

IE6是不支持PNG图片的的透明度的，网上有很多方式来解决这一兼容性问题，这里介绍其中的一种，通过以下链接下载js修复文件

http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js

然后新建一个js文件来处理需要修复的标签或class,id名如

DD_belatedPNG.fix('div,ul,ol,li,dt,dd,dl,span,img,a,em,strong,h1,h2,h3,h4,h5,h6,p')

假设以上的文件名为ie6Fixpng.js并和修复文件一并放在js文件下，则在待修复文件头部加入如下代码：

<!--[if IE 6]>
	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2FDD_belatedPNG_0.0.8a-min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fie6Fixpng.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<![endif]-->

这样png文件在IE6中也可以透明显示了。

HTML中文乱码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

通过getContext操作Canvas对象返回空

在使用JS操作Canvas时出现如下报错
TypeError: null is not an object (evaluating ‘canvas.getContext’) Safari
Uncaught TypeError: Cannot read property ‘getContext’ of null  Chrome
这通常是由于多次重复使用了getContext或者是在DOM加载完成前调用了getContext方法
对于后一种，可以把JS代码放到body的后半部分，也可以封装到一个函数，如init，并通过如下两种中的一种方法调用

	window.onload=init;
	window.addEventListener("load", init, true);

注：如果使用window.onload=init()，将会出现同样的报错

如何判断是否微信浏览器

window.onload = function(){
    if(isWeiXin()){
        ... ...
    }
}
function isWeiXin(){
    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true;
    }else{
        return false;
    }
}

PHP代码

function is_weixin(){ 
	if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== false ) {
			return true;
	}	
	return false;
}

如何去除iPhone, iPad上视频的默认播放按钮？

在iPhone, iPad的Safari浏览器中视频默认会出现一个播放按钮，想要去除这个按钮只需通过伪元素来设置即可(*代表所有标签，也可设置video)

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none
}