<!-- css -->
@media only screen and (max-device-width: 1024px) and (orientation:portrait) {
.landscape { display: none; }
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape) {
.portrait { display: none; }
}
<!-- example markup -->
<h1 class="portrait">Your device orientation is "portrait"<h1>
<h1 class="landscape">Your device orientation is "landscape"<h1>
selector {filter: alpha(opacity=50); -khtml-opacity: 0.5; -moz-opacity: 0.5;opacity: 0.5;}
#div { min-height: 500px; height:auto !important; height: 500px;}
如果你之前遇到过这个问题，你就应该知道它是多么的烦人，幸运的是，现在你可以使用CSS3变换来解决这个问题：.vc{position: relative;top: 50%;-webkit-transform: translateY(-50%);-o-transform: translateY(-50%)
textarea { overflow: auto; }
.blurry-text { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);}
元素必须是相对定位，且具有足够的padding来显示多余的边框：#borders { position:relative; z-index:1; padding:30px; border:5px solid #f00; background:#ff9600;}#borders:before { content:; position:absolute