Question

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

除了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]-->

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

自动宽度覆盖div不能在IE中工作

1 个答案: