2

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

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

删除它时效果很好，但我的总体布局向左移动（不再是中心），我的菜单链接不再有蓝色下划线 - 请参阅此链接：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});
                });
            });

谢谢

4

2 回答 2

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 项目。否则，事情会变得很糟糕。

于 2013-01-31T21:03:48.697 回答
0

我认为问题出在插件上。我使用了另一个很好用的马赛克 jquery 插件，它带有 XHTML 1.0 过渡文档类型：

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

谢谢你的帮助

于 2013-02-01T15:53:12.827 回答