Question

示例代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
span {display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("span").fadeIn(3000);
  });
});
</script>
</head>
<body>
<button>Fade in</button>
<span>This is some text.</span>
</body>
</html>

它在IE8和旧版本中不起作用。任何解决方案？

Answer 1

我认为因为span标记是一个内联元素，所以它没有布局，不像DIV这样的块级元素。

将它交换为div并且它可以工作，或者，这种方法（将块布局分配给您的span，然后使用Jquery隐藏）将保留您的标记，并按照IE8的要求运行：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

span {display:block;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").hide();
  $("button").click(function(){
    $("span").fadeIn(3000);
  });
});
</script>
</head>
<body>
<button>Fade in</button>
<span>This is some text.</span>
</body>
</html>

Answer 2

如果您需要将文本显示内联保留，请将跨度的CSS更改为“display：inline-block”，以下代码显示此处理前后的文本：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

span {display:inline-block;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").hide();
  $("button").click(function(){
    $("span").fadeIn(3000);
  });
});
</script>
</head>
<body>
<button>Fade in</button>
Previous text <span>This is some text.</span> Following text.
</body>
</html>

IE中的jQuery淡入淡出效果（8）

2 个答案: