马铖的博客-MaCheng's Blog.分享有用的知识，记录有趣的见闻 – http://blog.mc-zone.me菜单跳至内容个人主页博客首页文章分类JavaScriptCSSPHP关于我用 -webkit-mask-image 解决 border-radius 元素对应用了 transform 的子元素 overflow:hidden 失败的 BUG (WebKit下).1条回复在 CSS3 的 border-radius 上能遇到很多坑。有关 Android 移动端各种兼容就不说了。最近又遇到一个 Webkit 下对于应用了transform 的子元素 overflow:hidden 失效的情况。问题重现在一个应用了 border-radius 的圆角元素上，加上 overflow:hidden。子元素铺满。对于子元素超出圆角的部分可以被隐藏掉。形成一个圆角头像容器的结构。代码如下：HTML<div id="wrapper"><div id="box"></div></div>CSS#wrapper {position: absolute;width: 200px;height: 200px;overflow: hidden;border-radius: 50%;background-color: #ccc;background-clip: padding-box;}#box {position :relative;width: 100%;height: 100%;background-color: #cde;-webkit-transition:all 0.5s ease;transition:all 0.5s ease;}此时想在 #wrapper 容器内做一个画廊轮播的效果。对 #box 应用一个 transform 变化，使用 translate3d 对其进行横向偏移。会发现 #box 溢出了 #wrapper 的圆角范围。overfow:hidden; 失效。#box.has-translate {-webkit-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0);}解决方法继续阅读 →本条目发布于2015 年 3 月 3 日。属于CSS分类，被贴了 border-radius、BUG、CSS、css3、WebKit 标签。作者是马 铖。给文章打分: (No Ratings Yet)Loading ...AJAX 中使用 overrideMimeType() 设置接受的 mime-type（手动指定响应编码格式）发表回复新的 XHR Level 2 新增了 overrideMimeType() 方法，可以在发送端指定接收内容的mime-type。这对服务器与客户端使用不同编码类型时非常有用。例如在以前如果浏览器使用UTF-8而服务器返回了GBK格式的数据时可能会遇到乱码。而现在就可以用overrideMimeType来解决。var xhr = new XMLHttpRequest();if( xhr.overrideMimeType ){//overrideMimeType() 必须在 send() 之前设置xhr.overrideMimeType("text/plain; charset=utf-8");}xhr.open('GET',url,true);xhr.send(null);这时候服务器就会优先使用 overrideMimeType() 中指定的格式来给浏览器发送响应。这种情况下，即使是服务端程序已经设置过Header Content-type ，也会优先使用 overrideMimeType() 中的设置来返回响应。基本上目前支持 XHR Level 2 的现代浏览器都支持这个方法。另外在IE浏览器方面，这个方法在IE 11上可用 overrideMimeType | MSDN本条目发布于2015 年 2 月 24 日。属于JavaScript分类，被贴了 AJAX、mime-type、XHR、编码 标签。作者是马 铖。给文章打分: (1 votes, average: 5.00 out of 5)Loading ...通过 XHR Level2 以及 IE XDR (XDomainRequest) 实现AJAX跨域发表回复以往遇到AJAX跨域需求时都会采用服务器端代理，或者改用JSONP,  window.name，postMessage() 等方法模拟，但都不是很纯粹的AJAX解决方案。今天学到了新的实现跨域的方法。XHR Level2HTML5中 XMLHttpRequest Level 2 的推出。可以通过在返回的HTTP请求头中加入 Access-Control-Allow-Origin 的设置，让浏览器支持对不同域的AJAX请求。这个情况下前端AJAX的代码不用做任何更改，只需要在服务端的返回中设置以下头信息即可:Access-Control-Allow-Origin: * //*代表任何域。也可以指定地址Access-Control-Allow-Methods: POST,GET //支持的方法例如PHP：header( " Access-Control-Allow-Origin: * " );header( " Access-Control-Allow-Methods: POST,GET " );另外XHR2也带有更多高级功能，例如progress进度，文件上传，获取二进制数据等。详见 https://dev.opera.com/articles/xhr2/XDR (IE 8-9 Only)继续阅读 →本条目发布于2015 年 2 月 14 日。属于JavaScript分类，被贴了 AJAX、cross-domain、XHR 标签。作者是马 铖。给文章打分: (1 votes, average: 3.00 out of 5)Loading ...Object.observe()监视对象属性的改变发表回复最近不断的看到关于Object.observe()的介绍，Object.observe()方法可以用来异步监测对象的属性变化。这是一个功能强大的新特性，非常的有用。Object.observe()可以看到他属于ECMAScript 7中提出的一部分，目前属于实验性方法，还在推进中。Google Chrome 36 和 Opera 23 以上已经支持。其他厂商貌似还在观望。（截至目前2015.01.25）继续阅读 →本条目发布于2015 年 1 月 25 日。属于JavaScript分类，被贴了 Data Binding、ECMAScript 7、双向绑定 标签。作者是马 铖。给文章打分: (No Ratings Yet)Loading ...总结响应式设计中应该注