部分css浏览器兼容问题;js异步加载css;

1.相同字体在不同浏览器下所占空间不一样:font-size:14px的宋体文字,ie下实际占高16px,下留白3px; FF 实际占高17px,上留白1px,下留白3px,opera更不一样;解决方案:设定line-height。确保所有的文字都有默认的line-height

2.给容器定义高度,FF容器边的外形就定下来了,IE则会被内容撑大,高度限定失败;so,不要轻易给容器定义高度;

3.横向上的。如果float 容器未定义宽度,ff下内容会尽可能撑开容器宽度,ie下则会优先考虑内容折行。所以,内容可能撑破的浮动容器需要定义width;

4.IE的浮动容器margin会加倍,解决方法:给浮动容器定义display:inline-block;

5.IE6下,外层元素内有float元素时,margin-top:14px;之后会自动生成margin-bottom:14px;解决方法:外层元素设定border或者float;

6.吞吃现象:IE6下上下两个div,上面的div设置背景,却发现下面没有设置背景的div 也有了背景。对应上面的背景吞吃现象,还有滚动下边框缺失的现象。解决方案:使用zoom:1;

7.IE6 的注释内容有时会重复,重复多少因注释的多少而改变。解决方法:<!–[if !IE]> picRotate start <![endif]–>

8.当inline-block元素和inline元素写在一起之后,inline-height便会失效。解决方法:让两个元素浮动起来;

js异步加载css

1.可以写一个函数然后对其调用:

function loadCSS(url){
                var cssLink = document.createElement("link");
                cssLink.rel = "stylesheet";
                cssLink.rev = "stylesheet";
                cssLink.type = "text/css";
                cssLink.media = "screen";
                cssLink.href = url;
                document.getElementsByTagName("head").appendChild(cssLink);
}

在网页顶部js中加入这段代码;然后用script调用,参数填css文件所在链接;

<script type="text/javascript">
 loadCSS(‘new.css’);
</script>

2.摘自news.qq页面代码:

<script>
var SCRIPT_TIMEOUT = 20000;
var QVPL_PATH = "/QVPL1.0.0.js";
function loadHelper (jsurl) {
var oScriptEl, oTimeoutHDL, oHead;
oScriptEl = document.createElement("script");
oScriptEl.type = "text/javascript";
oScriptEl.language = "javascript";
oScriptEl.src = jsurl;
oScriptEl.onreadystatechange = doCallback;
oScriptEl.onload = function()
{
this.readyState = "complete";
doCallback();
if(typeof(lianbo) == "object"){
lianbo.init(window.QVPL);
}
};
oTimeoutHDL = window.setTimeout(doError,SCRIPT_TIMEOUT);
document.getElementsByTagName("head")[0].appendChild(oScriptEl);
function doCallback()
{
if (oScriptEl.readyState == "complete" || oScriptEl.readyState == "loaded")
{
oScriptEl.onload = oScriptEl.onreadystatechange = new Function();
window.clearTimeout(oTimeoutHDL);
}
};
function doError()
{
oScriptEl.parentNode.removeChild(oScriptEl);
};
}
loadHelper(QVPL_PATH);
</script>