.sprite { overflow:hidden; display:inline; background:url(spriteButton.png) no-repeat;}
.submit { width:14px; height:14px; background-position:0 -14px;}
<span><img src="sprite.gif" class="sprite submit" alt="Damn it!" />Sprite</span>
之所以这样，img就可以设置尺寸，也不用设置float，重点是要制作一张1x1像素的空白（可透明）图片，如： sprite.gif。
Use jQuery.noConflict() redefine default selector of jquery, yes, it's "$".
You can rename $j(), $jQuery()...
But, before use jQuery.noConflict(), other js library must be loaded.
For example:
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("#btn").click(function(){
$j(this).hide();
})
});
Step 1: Inset background:fixed in body.
Step 2: Use expression(offsetParent.scrollTop+offsetParent.clientHeight-400+'px');
body { background:url(imgs/pageBg.png) fixed;}
#menubar {
width:100px;
height:100px;
position:fixed;
bottom:0;
right:0;
z-index:10000;
_position:absolute;
_top:expression(offsetParent.scrollTop+offsetParent.clientHeight-400+'px');
}
[if IE 6] example:
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
/* fixed元素的绝对位置是相对于HTML元素来说，而滚动条是body元素的，这是设置right:17px的原因 */
#fixed { position:absolute; top:expression(eval(document.body.scrollTop + 50));}
You can:
/* IE7+ FF Other Standard Browser */
html > body #menubar {...}
/* IE6 Only */
* html #menubar {...}
HTML标签元素的默认值，仅供参考。
/* Default Css Style */
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell; }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px; line-height: 1.12 }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, object,
select { display:inline-block; }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "\A" }
:before, :after { white-space: pre-line }
center { text-align: center }
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}
ocument.compatMode，可以用来判断当前页面采用的渲染方式。下面官方文档的说明：
BackCompat：标准兼容模式关闭。
CSS1Compat：标准兼容模式开启。
当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；
当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。
浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。
var docbody = document.body;
var docelem = document.documentElement;
if (document.compatMode == "BackCompat")
{
//alert("Disable! it's BackCompat.");
cWidth = docbody.clientWidth;
cHeight = docbody.clientHeight;
sWidth = docbody.scrollWidth;
sHeight = docbody.scrollHeight;
sLeft = docbody.scrollLeft;
sTop = docbody.scrollTop;
}
else
{
//alert("Enable. it's CSS1Compat.");
//document.compatMode == "CSS1Compat"
cWidth = docelem.clientWidth;
cHeight = docelem.clientHeight;
sWidth = docelem.scrollWidth;
sHeight = docelem.scrollHeight;
sLeft = docelem.scrollLeft == 0 ? docbody.scrollLeft : docelem.scrollLeft;
sTop = docelem.scrollTop == 0 ? docbody.scrollTop : docelem.scrollTop;
}
（以上代码兼容目前流行的全部浏览器，包括：IE、Firefox、Safari、Opera、Chrome）
Example:
.class {
display: -moz-inline-stack; //Firefox only code
display: inline-block; //some standard browsers
zoom: 1; //IE only
*display: inline; //Only IE know this code (CSS Hack)
}
css:
* html { overflow-x:hidden; overflow-y:hidden;}
* html body { height:100%; overflow-y:auto;}
* html #nav {
position:absolute;
right:26px;
}
html:
<div id="nav">
</div>
网上找不到合适的参考，只好自己揣摩一套。
目的是为了达到更好的语义化、可读性。我开始相对严格试用以下ID和CLASS的命名。
如果大家有好的提议，或者对以下的命名有意见，请你提出，我很欢迎指出问题。
Since reader friendly. With naming, from right now.
* How to read my CSS Selector? With naming from right now.
* ID - Words with mixed case and dash, Never underline.
Example:
#PostLists {}
#post {}
#post-121 {}
#post-acol-121 {}
* CLASS - Words with mixed case, initial letter of lowercase, Never underline and dash.
Example:
.album {}
.albumlist {}
.albumlistTemp1 {}
.albumlistTemp2 {}
Powered by WordPress