IE9无法对CSS文件长度限制的陷阱

最近在做的前端项目遇到一个很奇怪的问题，在IE8和其他现代浏览器下显示正常的元素，在IE9下却显示异常。 打开IE9蛋疼的Developer Tools后发现原先CSS上写的样式压根就没有应用到元素上去。无论怎么加hack还是其他方法都没有用。 然后尝试把CSS minify一下发现问题消失了。由此怀疑IE9是不是对CSS文件长度有限制，超出部分会自动截断（我的CSS mi

业界 2016年07月14日

[譯] 學習 CSS clip-path 屬性

整體來說網頁主要是由矩形所構成的，另一方面印刷品則具備相對多樣性。造成這樣差異的原因有很多，不過其中一個即是缺少合適的工具。這篇文章主要會介紹 clip-path 這個 css 的樣式規則可以讓我們遮掉元素的局部，就是不顯示出來。達成這項功能背後的原理就是我們可以透過它去定義可視區，類似於遮色片的概念。我們將從基礎開始然後涵蓋語法，進一步理解進階的概念。基礎clip 意思是

业界 2016年07月14日

基于Bootstrap做定制，并与官方库保持更新的方法

bootstrap是一个很好的css框架，可以给项目提供一个良好的css框架基础，但是很多情况下我们需要对bootstrap做一些定制以适应项目的需求。定制bootstrap的方法有很多种，如果你想深入到bootstrap源码进行定制的话，那么本文是比较适合你的。下面讲一下如何用git管理你的bootstrap定制项目，并能够与bootstrap官方库保持更新的方法。git

业界 2016年07月17日

移动web开发浅谈之那些我们需要知道的基础

前言开发生涯总是丰富多采，工作多年，不同领域还是逃不过雨露均沾，之前开发过android，微信，ios，web网站也玩过。但是对于移动web这一块，确实没有专门很深入的学习，现在需要做了，也将自己的学习过程记录下来，供大家互相学习，说的不对，可以报警。正文概念本次要谈的移动web不是web app，只是很普通的移动端的web界面。移动web可以这么理解：就是把以前在pc上的

业界 2016年07月18日

书页效果

书页效果.book {position: relative;width: 200px;height: 248px;margin-left: 20px;border: 1px # eee solid;background-color: # fff;box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2)}.book::after {positi

业界 2016年07月18日

css居中最佳实践

css居中是非常常见的问题，也是面试热门，现在对居中问题做个总结水平居中万能的text-align居中给父元素添加text-align:　center,子元素都会居中，无论是inline还是block缺点：text-align属性会继承会影响后代元素display: table配合margin: 0 auto.center {display: table;margin: 0

业界 2016年07月18日

一些css小问题

块级元素，引用百度百科块级元素特点：①总是在新行上开始；②高度，行高以及外边距和内边距都可控制；③宽度缺省是它的容器的100%，除非设定一个宽度。④它可以容纳内联元素和其他块元素行级元素，引用百度百科块级元素特点：①和其他元素都在一行上；②高，行高及外边距和内边距不可改变；③宽度就是它的文字或图片的宽度，不可改变④内联元素只能容纳文本或者其他内联元素（‘缺省’我也不知道是什

业界 2016年07月18日

css中的那些布局

因为最近心血来潮，就总结了一下css中的几种常见的多列布局。两列自适应布局两列自适应布局算是css布局里面最基础的一种布局了，不少网站在使用。这种布局通常是左侧固定，右边自适应，当然也有反过来的，道理一样，这里有好几种方法。 (张鑫旭老师的博客是左边流式布局，右边固定宽度）左浮动+margin 因为浮动会导致元素脱离文档流，所以下面的元素会占据浮动元素原来的位置。 这个时

业界 2016年07月18日

css如何搞正方形

如何搞正方形 总有需求会要有正方形的框。同时宽度是可以自适应的。 但是好像没有什么属性可以设置高度等于宽度这样的css。 在技术群问了下，大牛立马给我弄了个，http://code.w3ctech.com/detail/2208 得到了很好的启发，结合自己的实际应用，完善了下。看demo （内有分析） http://liyatang.github.io/demo/css/s

业界 2016年07月18日

DIV 上下左右居中黑科技

# info{height:0px; width:0px;top:50%; left:50%;position:absolute;} # center{background:# FFCC33;border:1px solid # 0033FF; width:300px;height:300px;position:absolute; margin:-150px;} 哆啦A梦

业界 2016年07月16日