javascript - JS 按钮的 CSS 适用于本地计算机，但不适用于服务器

Question

我正在使用一系列 JS 打开/关闭按钮。在本地机器上完美测试，但上传时仅适用于非 IE 浏览器(令人惊讶。)

路径都是正确的，三重检查。此外，它们还可以在非 IE 浏览器中工作。

按钮的 CSS

.bluebutton{
-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
background-color:#e0e0e0;
border:0;
color:#333;
cursor:pointer;
font-family:arial,helvetica,sans-serif;
margin:0;padding:5px;
text-decoration:none;text-align:center;font-size:15px;font-weight:400; 
border-bottom:2px inset #cccccc;
position:relative;display:block;
width:100%;
}

标记

<script src="jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){   
$('.blue').hide().before('<a href="#" id="toggle-blue" class="bluebutton">Primary Text <br> Subtext</a>');
 $('a#toggle-blue').click(function() {
    $('.blue').slideToggle(1000);
    return false;
 });
 });
 </script>

<div class="blue">Text</div>

如果我手动设置每个按钮的格式，这些按钮就可以正常工作。问题是我正在创建一个非常大的 Accordion 式菜单，其中有 4 层按钮，这些按钮的手动格式占用了 200kb。见下文

<script type="text/javascript">
$(document).ready(function(){   
$('.blue').hide().before('<a href="#" id="toggle-blue" class="button" style="width:100%;display:block;height:40px;color:#e0e0e0;font-weight:bold;font-family:arial,helvetica,sans-serif;font-size:18px;text-align:center;padding:5px 0px;margin:0;">Primary text <br> Subtext</a>');
$('a#toggle-blue').click(function() {
    $('.blue').slideToggle(1000);
    return false;
});
 });
 </script>

Answer 1

看来我的问题是 IE 在兼容模式下呈现内容。添加: <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">到我头上帮了忙。感谢大家的意见和建议。