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>

如果手动格式化每个按钮，按钮都可以正常工作。问题是我正在创建一个非常大的手风琴风格菜单，其中有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">到我的头上确实有所帮助。感谢大家的意见和建议。

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

1 个答案: