Question

我在主页上使用jquery滑动框动画：http://sandstonetombstonesuppliers.co.za/

现在我正在使用标准的HTML 5 doctype：这会在我的IE中产生问题（8和9）。您将在访问链接时看到，前两个框具有透明可见的文本动画，应该部分隐藏。将鼠标悬停在两个顶部框上以查看我的意思

删除它时工作正常，但我的总体布局向左移动（不再是中心），我的菜单链接不再有蓝色下划线 - 请参阅此链接：http://sandstonetombstonesuppliers.co.za/index2.html

为什么这样做？

这是我的标记：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bluegig Distribution</title>

    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="shortcut icon" href="/images/favicon.ico"/>
    <link rel="stylesheet" type="text/css" media="screen" href="css/slidingboxes.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />   
    <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>  
        <!--[if lt IE 9]>
            <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
        <![endif]-->
        <!--[if lte IE 7]>
            <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
        <![endif]-->
</head>

更新：似乎使用与Chrome和FF ???中的滑动框产生相同的问题

Javascript:

$(document).ready(function(){
                //To switch directions up/down and left/right just place a "-" in front of the top/left attribute

                //Horizontal Sliding
                $('.boxgrid.slideright').hover(function(){
                    $(".cover", this).stop().animate({left:'446px'},{queue:false,duration:500});
                }, function() {
                    $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:500});
                });
                //Diagnal Sliding
                $('.boxgrid.thecombo').hover(function(){
                    $(".cover", this).stop().animate({top:'357px', left:'325px'},{queue:false,duration:500});
                }, function() {
                    $(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:500});
                });

                //Full Caption Sliding (Hidden to Visible)
                $('.boxgrid.captionfull').hover(function(){
                    $(".cover", this).stop().animate({top:'257px'},{queue:false,duration:250});
                }, function() {
                    $(".cover", this).stop().animate({top:'357px'},{queue:false,duration:250});
                });
                //Caption Sliding (Partially Hidden to Visible)
                $('.boxgrid.caption').hover(function(){
                    $(".cover", this).stop().animate({top:'120px'},{queue:false,duration:250});
                }, function() {
                    $(".cover", this).stop().animate({top:'317px'},{queue:false,duration:250});
                });
            });

由于

Answer 1

首先，您的文档类型和名称空间声明搞砸了。你试过吗？

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

您正在设置 html5 doctype ，但随后会引用 xhtml命名空间。那可能会给你IE中的问题...

我通常会建议克隆h5bp的最新git分支（html5样板）来设置你所有的html5项目。否则，事情会变得棘手。

Answer 2

我认为问题在于插件。我使用了一个非常好的镶嵌jquery插件，使用XHTML 1.0 Transitional doctype：

http://buildinternet.com/project/mosaic/1.0/

感谢您的帮助

HTML 5 Doctype声明与IE混淆

2 个答案: