div { width: 100%; height: 0; padding-bottom: 100%; }
Category: CSS
Opacity image moves on hover
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
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>
Align text vertically center in 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
Left align li elements with list-style:outside style
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}
background-size:cover on Android native browser
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;
Auto hide placeholder text
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
Make two div equal height
<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 for Simplified Chinese
font-family: 宋体, SimSun, 华文细黑, STXihei, Helvetica, Arial,sans-serif