web-dev-qa-db-ja.com

ディスプレイ：Internet Explorerの初期

Google Chrome=およびFirefoxで正常に機能するWebサイトを作成しましたが、Internet Explorerで実行すると問題が発生します。

そのため、インデックスページには2つのスライドショーがありますが、特定の画面解像度で表示できるのは1つだけです。いくつかのメディアクエリを作成して、display:none;をその解像度で必要のないスライドショーに設定できるようにしました。再度表示するには、display:initial;を使用しますが、Internet Explorerはそのコマンドをサポートしていません。

Internet Explorerでdisplay:none;を使用して非表示にしたものを表示する方法が必要です。

PS：visibility:hidden;を使用することは、スペースを予約するべきではないため、オプションではありません。

私を助けることができれば、返信してください。とにかくこれを読んでくれてありがとう。

これがコードです。それは役立つかもしれません（私は正しく投稿する方法がわかりません、申し訳ありません）：

<section id="containerGrotePage">
    <div id="page">
    <ul id="slider">
        <li><img src="images/slideshow/image2.jpg" alt="slideshow foto 1" /></li>
        <li><img src="images/slideshow/image1.jpg" alt="slideshow foto 2" /></li>
        <li><img src="images/slideshow/image3.jpg" alt="slideshow foto 3" /></li>
        <li><img src="images/slideshow/image4.jpg" alt="slideshow foto 4" /></li>
    </ul>
</div>
</section>

<div id="pageKlein">
    <ul id="sliderKlein">
        <li id="kleineSlideLi">
            <img id="fotoslideshowKlein" src="images/slideshow/image1.jpg" alt="slideshow foto 1" />
        </li>
    </ul>
<button onclick="slideshowKlein()" id="indexkleineSlideshowKnop">volgende</button>
</div>

これは私が最小の画面で行うことです：

#containerGrotePage{
display:none;
}
#page{
display:none;
}       
#kleineSlideLi{
background-color:black;
padding: 10px 50px 10px 50px;
}
#fotoslideshowKlein{
width:90%;
margin-left:4%;
border: 1px solid black;
}
#indexkleineSlideshowKnop{
width:90%;
margin-top:1%;
margin-left:4%;
}

最初のメディアクエリmin：440px

@media only screen and (min-width:440px){
#container{
    margin-top:3%;
}

/*--slideshow--*/
#page {
    display:initial;
    width:600px; 
    margin:50px auto;
}
#slider {
    width:600px; 
    height:250px;

/*IE bugfix*/
    padding:0;
    margin:0;
}

メディアクエリ最小：610px

#slider li { 
list-style:none; 
}

#containerGrotePage{
display:initial;
display:block;
width:600px;
margin-top:2%;
margin-left:auto;
margin-right:auto;
}

#pageKlein{
display:none;
}
#page {
    display:initial;
width:600px; 
margin:50px auto;
}
#slider {
width:600px; 
height:250px;

/*IE bugfix*/
padding:0;
margin:0;
}

メディアクエリの最小値：715px

#slider {
width:600px;
height:250px;

/*IE bugfix*/
padding:0;
margin:0;
}

#slider li {
    list-style:none;
}

#page {
width:600px;
margin:50px auto;
}

私が提供した情報がお役に立てば幸いです。

ContainerGrotePageは大きなスライドショー、BTWとpagekleinは小さなスライドショーです。私はオランダ語を話すので、英語を話す人にとって意味のない名前もあるかもしれません。 :)

よろしくお願いします！

cssinternet-explorerslideshowdisplaytagdisplayobject
19
user3588913

IE and Chrome。 Here 、下にスクロールしてください）.

要するに、 IEは受け入れませんdisplay = "initial"。だからトリックはdisplay = ""代わりに。つまり、

if(...){
    a.style.display = "none";
    b.style.display = "";
}
else{
    a.style.display = "";
    b.style.display = "none";
}
9
Wesley

これは、初期値（両方の行）を設定する必要がある場合、cssファイルで機能します。

表示：インライン;

表示：初期;

9
Klas

同じ問題があり、display：blockまたはdisplay：inlineはIEでコンテンツを表示します。ただし、レイアウトのコンテンツを適切に非表示/表示するためにクラスを使用していたため、ブロック用とインラインコンテンツ用の2つのクラスセットが必要でした。

そのディスプレイを検討する場合、それは意味がありませんでした：noneとdisplay：initialは、IE以外のブラウザー（windows、mac、Android、およびiPhoneでテストされたfirefox/chrome/safariでテスト済み）で正常に動作します。

最後に、jQuery $（ "。class"）。hide（）および$（ "。class"）。show（）を使用して、ページのロード後に最初に実行された関数内でこれを処理する方がはるかに簡単であることがわかりました。次に、ウィンドウのサイズ変更イベントハンドラーから再度呼び出されます。

1
user3754328

hidden属性を使用するだけです。

a.setAttribute('hidden', '')
b.removeAttribute('hidden')

IE11を含むすべての主要なブラウザーでサポートされています。 IE10サポートを取得するには、いくつかのCSS行が必要です。

[hidden] {
  display: none;
}
0
Philipp Ryabchun