链接外部样式表与加载 jquery 的脚本 src 冲突？答案

【问题标题】：link external stylesheet conflicting with script src loading jquery?链接外部样式表与加载 jquery 的脚本 src 冲突？
【发布时间】：2011-10-03 09:28:28
【问题描述】：

嗨，我正在用 jquery 做一个简单的扩展滑块并且不知何故滑块会扩展到全角窗口，然后缩小到我分配给它的所需宽度..

（如果您重新加载页面几次，它有时会出现）

问题似乎消失了切换加载顺序 jquery 和我的外部样式表

但我不知道为什么，我想知道是否有人知道????

这是导致问题的代码

html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<link type="text/css" href="screen.css" rel="stylesheet" media="screen" />

<script>
$(document).ready(function(){
$("#slider").animate({width:'100px'},1300);
});
</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
</head>

<body>

<div id="slider">
</div>

</body>
</html>

css：

#slider{
width:10px;
height:20px;
background:#09C; 
}

在切换和的顺序之后扩大的问题消失了：

html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link type="text/css" href="screen.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>

<script>
$(document).ready(function(){
$("#slider").animate({width:'100px'},1300);
});
</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
</head>

<body>

<div id="slider">
</div>

</body>
</html>

css：

#slider{
width:10px;
height:20px;
background:#09C; 
}

【问题讨论】：

标签： javascript jquery hyperlink conflict

【解决方案1】：

因为脚本应该总是在静态资源之后加载？

大多数浏览器从上到下逐行呈现，因此对一行所做的更改可以在下一行再次更改。

如果先加载脚本，那么样式会改变脚本。

【讨论】：