0

私はここでこのチュートリアルビデオをフォローしてきましたが、css3のフレキシブルボックスに関するすべてを明確に示しています。私はモジラやクロームに問題はありません。ただし、ボックスはInternetExplorerのセクションボックスのすぐ下に配置されます。デモはここにあります（mozillaで表示すると、違いがわかります）。これがiveが遊んでいるhtmlコードです：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> First html5 </title>
<link rel="stylesheet" href="mainnew.css" />
</head>

<body> 
<div id="big_wrapper">
<header id="top_header">
<h1> Welcome to html5 </h1>
</header>

<nav id="top_menu">
<ul>
<li>Home</li>
<li>Tutorials</li>
<li>Podcast</li>
</ul>
</nav>

<div id="new_div">
<section id="main_section">
<article>
<header>
<hgroup>
<h1>Title of article</h1>
<h2>Subtitle for article!</h2>
</hgroup>
</header>
<p>This is the best article eva!</p>
<footer>
<p>- writtern by Emre Caglar </p>
</footer>
</article>

<article>
<header>
<hgroup>
<h1>Title of article2</h1>
<h2>Subtitle for article2!</h2>
</hgroup>
</header>
<p>This is the best article eva!</p>
<footer>
<p>- writtern by Emre Caglar </p>
</footer>
</article>
</section>

<aside id="side_news">
<h4>News</h4>
Emre has a new dog
</aside>

</div>


<footer id="the_footer">
Copyright mreonet 2012
</footer>

</div>
</body>
</html>

およびcssコード

body{
        width:100%;
        display:-webkit-box;
        display: -moz-box;
        display: box;
        -webkit-box-pack:center;
        -moz-box-pack:center;
        box-pack:center;
    }
    #big_wrapper {
        max-width: 1000px;
        margin:20px 0px;
        display:-webkit-box;
        display: -moz-box;
        display: box;
        -moz-box-orient: vertical;
        -webkit-box-orient: vertical;
        box-orient: vertical;
        -moz-box-flex: 1.0; 
        -webkit-box-flex: 1;
        box-flex: 1;

    }
    #top_header {
        background:yellow;
        border: 3px solid black;
        padding:20px;
    }
    #top_menu { 
        border:red;
        background:blue;
        color:white;
    }
    #top_menu li {
        display:inline-block;
    }
    #new_div { 
        display:-webkit-box;
        display: -moz-box;
        display: box;
        -webkit-box-orient:horizantal;
        -moz-box-orient: horizontal;
        box-orient: horizontal;

    }
    #main_section {
        border:1px solid blue;
        margin:20px;
        padding: 20px;
        -moz-box-flex: 1.0; 
        -webkit-box-flex: 1;
        box-flex: 1;

    }
    #side_news {
        border:1px solid red;
        width:220px;
        margin:20px 0px;
        padding:30px;
        background:#66cccc;

また、IE8でこのページを表示すると、cssスタイルが使用されていないことに気付きました。私はhtml5を初めて使用するので、ばかげた間違いを犯す可能性があります。

誰かがこれについて私を助けることができますか？ところで、これは私の最初の質問です。何かが足りない場合は、私に知らせて、それについて申し訳ありません。

4

4 に答える 4

1

フレキシブルボックスモデルはIE10でサポートされています。

http://msdn.microsoft.com/en-us/library/ie/hh673531(v=vs.85).aspx

実際、私はその週にブラウザのプレフィックスで遊んでいます。

http://leaverou.github.com/prefixfree/#test-drive

于 2012-11-21T16:30:01.110 に答える
1

フレキシブル ボックス モデルは、IE ではまだサポートされていません。

http://www.w3schools.com/cssref/css3_pr_box-flex.asp

于 2012-05-16T09:54:02.713 に答える
0

@Ravi が述べたように、IEはネイティブでサポートしていませんflex-box。これは、IE で有効にするために使用できるポリフィルです。

于 2012-11-14T22:39:50.587 に答える
0

フレックス ボックスは IE でサポートされています。ただし、IE 1o は Flexbox Working Draft の 2012 年 3 月 22 日版に基づいています。ms-flex-direction を使用して向きを設定します。横は行、縦は列。詳しい使い方はこちらをご覧ください。

http://msdn.microsoft.com/en-us/library/ie/hh673531(v=vs.85).aspx

例えば

body
{   
  display: -ms-flexbox;
  -ms-flex-direction: row;
  -ms-flex-align: stretch;
  -ms-flex-pack: center;
  border: blue; 
  width: 100%;
  height:500px
}

#box1 {
    width: 500px;
    display: block;
    background: black;
    border: black;
    border: 1px solid black
}

#box2 {
    width: 500px;
    display: block;
    background: red;
    border: red;
    border: 1px solid black
}
于 2014-02-25T21:53:44.493 に答える