css - 自动宽度覆盖 div 在 IE 中不起作用

Question

我有一个以缩略图页面开头的画廊页面。单击缩略图时，它会填充一个隐藏的 div，然后显示该 div。显示 div 具有基于图像的自动宽度和 700 像素的最大高度，并带有溢出:自动;。

除 IE 外，这在任何地方都可以正常工作。在 IE 中，div 显示为一条细线，我终于发现图像大部分显示在屏幕左侧之外。

我在下面包含了 HTML 和 CSS。你会在那里看到一些 Angular 变量。这是由 JS 自动填充的内容。

HTML:

<div id="siteCover" ng-show="picID > 0">
</div>

<div id="outerPictureDisplay" ng-show="picID > 0">
<div id="innerPictureDisplay">
<div id="divClose" class="floatRight" ng-click="picID = 0;">Close</div>
<div id="picNavPrev" ng-click="picturePop({{prevID}});"><img src="images/arrowLeft.png" /></div>
<div id="picNavNext" ng-click="picturePop({{nextID}});"><img src="images/arrowRight.png" /></div>
<img src="images/photos/{{thisPic.image}}" id="displayedImage" />
<p ng-show="thisPic.title != ''"><b>{{thisPic.title}}</b></p>
<p ng-show="thisPic.desc != ''">{{thisPic.desc}}</p>
</div>
</div>

CSS:

#outerPictureDisplay{
z-index: 500;
top: 50px;
left: 50%;
padding: 0px;
position: fixed;
} 

#innerPictureDisplay{
left: -50%;
min-height: 200px;
height: auto;
max-height: 700px;
width: auto;
padding: 0px;
position: relative;
overflow: auto;
background-color: @lightcolor;
.bordered-dark;
.rounded;
& img{
    margin: 0px;
    padding: 0px;
    }
}

#divClose{
font-size: 1em;
background-color: @darkcolor;
color: @lighttextcolor;
display: inline-block;
padding: 5px;
right: 0;
position: absolute;
}

#picNavPrev{
display: inline-block;
padding:0;
top:40%;
float: left;
height: auto;
position: absolute;
}

#picNavNext{
display: inline-block;
padding:0;
top:40%;
float: right;
right: 0;
height: auto;
position: absolute;
}

#siteCover{
width: 100%;
height: 100%;
background:rgba(0, 0, 0, 0.7);
z-index: 450;
position: fixed;
top: 0;
left: 0;
}

如何使它在 IE 中也能正常工作？

Answer 1

您只能为 IE 创建样式表:

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

或者你可以为特定版本的 IE 制作一个样式表，例如我想为版本 7 制作一个特定的样式表:

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

只需将括号中的数字替换为您拥有的版本号即可。