0

我正在使用一系列 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>
4

1 回答 1

1

看起来我的问题是 IE 在兼容模式下渲染东西。补充： <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">对我的头有帮助。感谢大家的意见和建议。

于 2013-11-08T20:01:12.513 回答