显示：Internet Explorer 的初始值

Posted 2023-03-13

【中文标题】显示：Internet Explorer 的初始值

【英文标题】：Display: initial for internet explorer

【发布时间】：2014-06-16 17:12:51

【问题描述】：

我创建了一个在 Google Chrome 和 Firefox 中运行良好的网站，但是当我在 Internet Explorer 中运行它时遇到了问题。

所以，我的索引页上有 2 个幻灯片，但只有一个应该以特定的屏幕分辨率显示。我创建了一些媒体查询，因此我可以将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"  /></li>
        <li><img src="images/slideshow/image1.jpg"  /></li>
        <li><img src="images/slideshow/image3.jpg"  /></li>
        <li><img src="images/slideshow/image4.jpg"  /></li>
    </ul>
</div>
</section>

<div id="pageKlein">
    <ul id="sliderKlein">
        <li id="kleineSlideLi">
            <img id="fotoslideshowKlein" src="images/slideshow/image1.jpg"  />
        </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%;

第一次媒体查询最小：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 是大幻灯片，顺便说一句，pageklein 是小幻灯片。 我说荷兰语，所以有些名字对说英语的人来说可能没有意义。 :)

提前谢谢大家！

【问题讨论】：

什么版本的 Internet Explorer？

如果您也可以发布网站链接会更好。

@omegaiori 使用 Internet Explorer 版本 11。

@Kheema Pandey：我不能给你链接，网站还没有上线。工作正在进行中。 :)

为什么使用 display:initial 而不是简单的 display:block 或 display:visible ？

【参考方案1】：

我找到了一个允许您在 IE 和 Chrome 中执行此操作的解决方案。 Here，滚动到底部。

长话短说，IE doesn't acceptdisplay = "initial"。所以诀窍是用display = "" 代替。即，

if(...)
    a.style.display = "none";
    b.style.display = "";

else
    a.style.display = "";
    b.style.display = "none";

【讨论】：

请注意，这与设置值 initial 并不完全相同，但是这更有可能与读者试图做的一致。详情请见this question。

【参考方案2】：

这个函数在一个css文件中，如果你需要设置初始（两行）：

显示：内联；

显示：初始；

【讨论】：

否决：误导。这里的显示初始值不被浏览器解释

【参考方案3】：

有同样的问题，并且 display: block 或 display: inline 将在 IE 中显示内容。但是，我们使用类来响应地隐藏/显示布局内容，并且需要有两组类，一组用于块，一组用于内联内容。

考虑到 display: none 和 display: initial 在非 IE 浏览器中工作正常（在 windows、mac、android 和 iPhone 上测试了 firefox/chrome/safari）时，这没有意义。

最后，我发现使用 jQuery $(".class").hide() 和 $(".class").show() 在最初在页面加载，然后从窗口调整大小事件处理程序中重新调用。

【讨论】：

您可以使用相同的类（如引导程序 .hide/.show），但只需根据标签名称使用不同的 display 值（div.hide、span.hide 等） .

【参考方案4】：

你可以只使用hidden属性：

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

所有主流浏览器都支持它，包括 IE11。要获得 IE10 支持，您需要几行 CSS：

[hidden] 
  display: none;