Category: CSS

div {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}

Solution: -webkit-backface-visibility: hidden;

Reference:
http://stackoverflow.com/questions/12980153/image-moves-on-hover-chrome-opacity-issue

Remove the spacing between two inline-block div

<style>
.container {font-size: 0}
.contianer > div {font-size: 14px}
</style>

<div id=”container”>
<div>1</div>
<div>2</div>
</div>

<div><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></div>

div {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
}

span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}

Reference: http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css

ul {list-style:none; margin:0; padding:0}
ul li {position:relative; margin-left:0; padding-left:1.0em}
ul li:before {content:”\2022″; fone-size:1.0em; position:absolute; top:0; left:0}

Reference: http://stackoverflow.com/questions/18753891/align-li-elements-with-list-typeoutside-style-to-the-content-border-consisten

Problem:
Background image is not full screen on Android native browser by using the following css:
background: url(‘…’) fixed center center / cover;

Solution:
Separate background-image from others and use it inline.

Then use each option separately in css file.
background-size: cover;
background-position: center center;

Reference:
http://stackoverflow.com/questions/20451933/background-sizecover-not-working-in-android-native-browser

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }

<style type=”text/css”>
.container {overflow:hidden}
.container div {float:left; margin-bottom:-1000px; padding-bottom:1000px}
</style>

<div class=”container”>
<div></div>
<div></div>
</div>

Reference: http://www.ejeliot.com/blog/61

Jsfiddle: http://jsfiddle.net/hkalan/fWRm4/

font-family: 宋体, SimSun, 华文细黑, STXihei, Helvetica, Arial,sans-serif

http://www.campaignmonitor.com/css/