本博客包含多个文档和书籍的翻译,但有能力者推荐阅读英文原版

HTML+CSS常见问题

FAQ Alan 6年前 (2014-08-16) 2040次浏览 0个评论 扫描二维码

常用技巧和经验

HTML+CSS常见问题

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

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

按窗口大小显示

IE File对象的兼容

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

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

清除样式和浮动

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

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

针对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名如

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

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

HTML中文乱码

通过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(),将会出现同样的报错

如何判断是否微信浏览器

PHP代码

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

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

喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址