分类: 浏览器兼容
MacOS 升级 Sonoma 之后 Chrome 低版本渲染 CSS mask-image属性使用 svg 出现边缘锯齿
MacOS 升级 Sonoma 之后 Chrome 低版本渲染 CSS mask-image属性使用 svg 出现边缘锯齿。
背景介绍
MacOS 升级最新版的 Sonoma 之后，通过 CSS 蒙层实现的样式，如果使用了 svg 会出现边缘锯齿。具体表现如下图：
这个现象在低版本 Chr[……]
H5处理全面屏iPhone底部边距
iPhone 从 X 开始使用全面屏，浏览网页的时候底部会有一条遮住可视区域，为了避免H5页面被iPhone底部条遮住，可以采取以下方案。
iPhone自适应底部
首先，iPhone自带了屏幕安全区域的处理策略，可以使用constant和env两个css特性来获取底部的安全距离，然后通过@sup[……]
IE6、IE7、IE8、Firefox、Chrome、Safari CSS hack兼容一览表
知道CSS的朋友一定听说过CSS hack，现在的浏览器IE、Firefox、Chrome、Opera、Safari。。。百家争鸣，可苦了Web前端开发人员了。
不同的浏览器对CSS的解释都有一点出入，特别是padding, line-height这些要细微控制的地方，下面的hack基本可[……]
浏览器自动播放策略的应对
如果不清楚浏览器自动播放策略，请先参阅：
Chrome
- Google Web 更新(2017年6月)：DOMException: The play() request was interrupted
- Google Web 更新(2017年9月)：自动播放策略变更
Safari
Google Web 更新(2017年6月)：DOMException The play() request was interrupted
英文原文：DOMException: The play() request was interrupted
你是不是刚刚在Chrome浏览器的控制台Console里遇到了这个未预料的媒体错误？
Uncaught (in promise) DOMException: The play() re[......]IE下载保存base64文件
如果一个超链接的链接地址是一个base64的代码，如下：
<a href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYW[......]JS遍历数组
使用prototype
[javascript]
var str = [“a”,”b”];Array.prototype.f=function(){}
for(var key in str){
console.log(key + “::” + (str[key] + “”));[……]
CSS清除浮动的方法
1.添加空<div>标签或者<br />
[html]
<style type=”text/css”>
*{margin:0;padding:0;}
body{font:36px bold; color:#FFF; text-align:cente[……]
CSS布局问题总结
经典两栏自适应布局
HTML网页结构如下：
<body>
<div class="left">
</div>
<div class="right">
</div>
</body>
- 使用绝对定位。
CSS代码：
.[......]兼容所有浏览器的加入收藏和设为首页代码
设为首页 和 收藏本站 js代码 兼容IE,chrome,火狐,360等。
[html]
//设为首页
function SetHome(obj,url){
try{
obj.style.behavior=’url(#default#homepage)’;[……]
IE6和IE7右浮动折行（IE右浮动BUG）
首先来看一段代码：
[html]
<div id=”wrap” style=”width:300px;border:1px solid #ff4e00;”>
这里是一些文字，默认在左侧
<div id=”right” style=”float:right;w[……]
CSS中z-index详解以及各浏览器表现差异
IE7中的z-index：
有时候z-index设置了很高的值（如：“z-index:999”）但在IE7中还是被遮盖了。这因为IE7的渲染DOM的问题。
当一个父容器被定位（如：“position:relative”）的时候，子元素的z-index属性会被重置。
解决办法：在父容器中加上[……]
IE6出现文字自动重复
原文链接：http://feizhaojun.com/doc-archive/IE6出现文字自动重复.html
[code lang=”ht[……]
IE条件注释
条件注释简介
- IE中的条件注释（Conditional comments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法。
- 条件注释只能用于IE5以上。
- 如果你安装了多个IE，条件注释将会以最高版本的IE为标准。
- 条件注释的基本结构和HTML的注释(< ![……]
ie6不支持无A状态伪类的解决办法
我们在做数据表格的时候，经常需要做鼠标经过一行变色的效果，以前碰到这个问题只能用onmouseover、onmouseout这类东西来解决，每行都加而且也只能改变背景颜色，效果不佳。其实在CSS中定义tr、td的伪类hover很容易能做出这样的效果，而且样式可以自定义的丰富美观。但遗憾的是现在占据主[……]