Question

尝试将链接设置为JQuery UI按钮时，我遇到了一个奇怪的问题。它显示为Chrome中的按钮以及Firefox和IE8中的链接。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript" src="script/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="script/jquery-ui-1.8.9.custom.min.js"></script>
    <link rel="stylesheet" type="test/css" href="stylesheet/jquery-ui-1.8.9.custom.css">
    <link rel="stylesheet" type="text/css" href="stylesheet/styles.css">
    <script type="text/javascript">
        $(document).ready(function(){
            $("a").button();
        });
    </script>
    <title>Introduction</title>
</head>
<body class="indexbody">
    <div class="indexwrapper">
        <div id="introduction">        
            <div class="btn">
                <a href="test.html" >link</a>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

看起来你的CSS链接元素中很容易错过拼写错误。 type属性应为text/css，而不是test/css。

x和s彼此非常接近。

<link rel="stylesheet" type="text/css" 
    href="stylesheet/jquery-ui-1.8.9.custom.css">

Chrome适应时，其他浏览器的语法更严格。 Chrome遵循Robustness Principle。

最后，加载CSS或JavaScript的顺序似乎并不重要。链接标记可以在脚本元素之前或之后。

Answer 2

CSS首先是JS包含，这应该可以解决您的问题。

<link rel="stylesheet" type="test/css" href="stylesheet/jquery-ui-1.8.9.custom.css">
<link rel="stylesheet" type="text/css" href="stylesheet/styles.css">
<script type="text/javascript" src="script/jquery-1.4.2.js"></script>
<script type="text/javascript" src="script/jquery-ui-1.8.9.custom.min.js"></script>

JQuery UI在Firefox和IE中没有样式化的标签

2 个答案: