CSS 显示：Internet Explorer 的初始值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23387130/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display: initial for internet explorer
提问by user3588913
I've made a website that works just fine in Google Chrome and Firefox, but when I run it in Internet Explorer I'm experiencing problems.
我创建了一个在 Google Chrome 和 Firefox 中运行良好的网站，但是当我在 Internet Explorer 中运行它时，我遇到了问题。
So, I have 2 slideshows on my index page but only one should show at a specific screen resolution. I created some media queries so i could set a display:none;to the slideshow I don't need at that resolution. And to make it appear again I use display:initial;but Internet Explorer doesn't support that command.
所以，我的索引页上有 2 个幻灯片，但只有一个应该以特定的屏幕分辨率显示。我创建了一些媒体查询，因此我可以将 a 设置为display:none;在该分辨率下不需要的幻灯片。为了让它再次出现，我使用display:initial;但 Internet Explorer 不支持该命令。
I need a way to make visible what I had invisible with display:none;in Internet Explorer.
我需要一种方法来使我display:none;在 Internet Explorer 中不可见的内容可见。
PS: Using visibility:hidden;is not an option because it shouldn't reserve the space.
PS：使用visibility:hidden;不是一种选择，因为它不应该保留空间。
If you can help me, please reply. If you can't I thank you for reading this anyway.
如果你能帮助我，请回复。如果你不能，我感谢你阅读这篇文章。
Here is come of the code; it might help (I'm not sure how to post correctly, sorry):
这是代码的来源；它可能会有所帮助（我不确定如何正确发布，抱歉）：
<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>
This is what I do on the smallest screen :
这就是我在最小屏幕上所做的：
#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%;
}
first media query min:440px
第一个媒体查询 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;
}
media query min:610px
媒体查询最小：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;
}
media query min:715px
媒体查询最小：715px
#slider {
width:600px;
height:250px;
/*IE bugfix*/
padding:0;
margin:0;
}
#slider li {
list-style:none;
}
#page {
width:600px;
margin:50px auto;
}
I hope the information I provided is useful.
我希望我提供的信息有用。
ContainerGrotePage is the big slideshow, BTW and pageklein is the small one. I speak Dutch, so some names might not make sense to English speakers. :)
ContainerGrotePage 是大幻灯片，顺便说一句，pageklein 是小幻灯片。我说荷兰语，所以有些名字对说英语的人来说可能没有意义。:)
Thanks in advance guys!
在此先感谢各位！
回答by Wesley
I found a solution that allows you to do it in IE and Chrome. Here, scroll to the bottom.
我找到了一个允许您在 IE 和 Chrome 中执行此操作的解决方案。在这里，滚动到底部。
Long story short, IE doesn't acceptdisplay = "initial". So the trick is doing it with display = ""instead. I.e.,
长话短说，IE 不接受display = "initial". 所以诀窍是用它来display = ""代替。IE，
if(...){
a.style.display = "none";
b.style.display = "";
}
else{
a.style.display = "";
b.style.display = "none";
}
回答by Klas
This functions in a css file, if you need to set initial (both lines):
如果您需要设置初始值（两行），则此功能在 css 文件中：
display: inline;
显示：内联；
display: initial;
显示：初始；
回答by user3754328
Had this same issue, and display: block or display: inline will show the content in IE. However, we were using classes to hide/show layout content responsively and would have needed to have 2 sets of classes, one for block and one for inline content.
有同样的问题，并且 display: block 或 display: inline 将在 IE 中显示内容。但是，我们使用类来响应地隐藏/显示布局内容，并且需要有两组类，一组用于块，一组用于内联内容。
That didn't make sense when considering that display: none and display: initial works fine in non-IE browsers (tested firefox/chrome/safari on windows, mac, android, and iPhone).
考虑到 display: none 和 display: initial 在非 IE 浏览器（在 windows、mac、android 和 iPhone 上测试过 firefox/chrome/safari）时，这没有意义。
In the end, I found it much easier to use jQuery $(".class").hide() and $(".class").show() to handle this within a function that was run initially after the page loads, then re-called from a window resize event handler.
最后，我发现使用 jQuery $(".class").hide() 和 $(".class").show() 在页面加载后最初运行的函数中处理这个更容易，然后从窗口调整大小事件处理程序重新调用。
回答by Philipp Ryabchun
You can just use hiddenattribute:
你可以只使用hidden属性：
a.setAttribute('hidden', '')
b.removeAttribute('hidden')
It's supported in all major browsers including IE11. To get IE10 support, you need a couple of CSS lines:
它在包括 IE11 在内的所有主要浏览器中都受支持。要获得 IE10 支持，您需要几行 CSS：
[hidden] {
display: none;
}
