0

次のことを検討してください...

<!DOCTYPE>
<html>
<head>
    <title></title>
    <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
        main{
            width:500px;
            height:500px;
            margin:0 auto;
            border:5px solid red;
            display:none;  
        }
    </style> 
</head>
<body>
    <main>
        <h1>Test</h1>
    </main>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        //load some external content then on callback...
        $('main').show();
    });
</script>
</html>

IE8 を除くすべてのブラウザで正常に動作します (ショッカー)。を削除すればdisplay:none;問題ないので、これが問題だと思います。しかし、なぜ？

私が達成しようとしていること

<main>、 ajax 呼び出しを介してコンテンツを挿入するa<nav>を含む私のラッパーです。サイトが最初にランディング ページのコンテンツを読み込んで空のコンテンツ ホルダーに挿入するときに、わずかにぎこちないちらつきがあります。大したことではありませんが、目にやさしいものが欲しかったので、スタイル定義に a を追加し、コンテンツがロードされたら、ちらつきを防ぐためにorを追加しました。動作します...IE8を除く。それはまるでshivによって定義されたものを失い、デフォルトで.<footer><div><div>display:none;mainshow()fadeIn()<main>displayinline

私が試したこと

<main>タグをに置き換えましたが<div id="main">、これは正常に機能します。しかし、私は HTML5 を採用しようとしており、<main>タグを使用したいと考えています。

私はこれがマイナーであることを知っています.理由がわからないとイライラします.

4

1 に答える 1

1

これを完全に信用することはできません...私が一緒に働いている他の開発者はjQueryヨーダです....

jQuery は、デフォルトで「display:inline;」の CSS スタイルを追加するように見えます。要素にタグを付ける。'main' は IE では既知の要素 (div など) として定義されていないため、デフォルトで 'inline' になります。いくつかの解決策は次のとおりです。

$('main').css('display','block');

またはフェードの場合：

var $main = $('main');
$main.css('display','block').hide().show(600); //--not yet tested
于 2013-09-25T19:53:42.787 に答える