input,select等表单元素在Android2.3默认浏览器下失效的问题

我遇到的问题

某一天,我心情还算不错的去上班,本来打算比较清闲的荒废这一天的。

可是一到公司,xxx拿着一款价值¥1999,搭载基于Android2.3深度定制的xxx操作系统的xxx手机到我的身边,这个页面的表单都填不了,这么严重的问题!让用户怎么用!

我操,都什么年代了,还用Android2.3。低头想了一会…原来这是一个混乱的年代啊!

解决问题

我不知道该怎么办,上线之前,我测了N多手机,都没问题。现在看来,是我忽略了一个很重要因素,我忽略了这是一个混乱的年代啊!Oh shit!但我很快静下心来,翻墙上了Google,输入”the select element does not work on android …

CSS3-声波动画

你:声波动画,听起来一点都不厉害,放出来看看啊!
我:好吧,是不厉害。。。可是,你打我呀~你打我呀,哈哈
你:…..

waves

实现方法

HTML

其实,声波就是一个一个的HTML标签(我用的是i,一共25个)。

<div class="waves">
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  

一行文字两端对齐

字符大小

<div><label for="">用户名:</label></div>
<div><label for="">性别:</label></div>
<div><label for="">留言内容:</label></div>

例如上面的HTML,如果想让他们看起来像两端对齐的话,怎么办呢?
首先,最长的一行是4个字符,所以把其它行都保证有4个“字符”就可以了,我们在不满4个字符的各个字中间加一个行内标签:

<div><label for="" class="three">用<i></i>户<i></i>名:</label></div>
<div><label for="" 

关于transitionend (二)

再看transitionend事件

在去年,我写过《关于transitionend》一篇文章,说的是如何解决该事件在元素执行多个属性变化时的回调次数问题。今天又用到transitionend事件,于是又想到了一种比较简单的解决方法。

删除transitionend事件

首先,再来看一下问题所在:Demo

上面的例子中,当鼠标经过一个设置了CSS3动画的DIV添加了transitionend事件,这个元素在进行变化的时候同时改变了3个属性,即:widthheight

[翻译]Flexbox完全手册

原文地址

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

译文不一定与原文内容完全相符,有我对其中的一些理解,但不会有太大的出入。

引言

Flexbox是一种更高效更灵活的布局方式,它可以让一些元素在一个容器里很容易的实现各种对齐以及控制这些元素之间的距离,即使这些元素的大小不固定(这也是它为什么叫flex的原因)。

其实Flex布局的主要思想是可以让容器去改变子元素的宽度、高度、顺序以及它们之间的距离等等(当然,这种布局方式针对不同的设备,不同分辨率都是起作用的)。Flex盒子会根据有效的空间去扩展或收缩元素。

比较重要的一点是,…