IE中重叠元素的垂直对齐

Posted 2023-03-05

【中文标题】IE中重叠元素的垂直对齐

【英文标题】：Vertical alignment of elements overlapping in IE

【发布时间】：2011-06-05 14:37:55

【问题描述】：

我正在构建的这个表单可以在 Chrome 和 FF 中完美呈现，但在 IE 中完全错位。

它应该是什么样子：

图片：

html：

<!--image upload bit-->
                        <div class="portlet-content">
                        <div class="logoInfo">
                        <h3><strong>Large Logo</strong></h3>
                        <p>Width: 160px, Height: 20px | image will be resized automatically</p>
                        </div>
                    <div class="imageUploadLogo noLogo"><img id="agencyLogo" src="images/logo_silhouette.png"  ></div>
                    <a href="helper/uploadpic.php?lightbox[width]=360&lightbox[height]=140&lightbox[iframe]=1" class="lightbox"><div id="logo_uploada">Upload</div></a> 
                </div>
                <div class="clearfix"></div>
                    <hr></hr>
                    <!--//image upload bit-->
                    <!--office upload bit-->
                        <div class="portlet-content">
                        <div class="logoInfo">
                        <h3><strong>Office Image</strong></h3>
                        <p>Width: 160px, Height: 120px | image will be resized automatically</p>
                        </div>
                    <div class="imageUploadPhoto noPhoto"><img id="agencyLogo" src="images/office_silhouette.png"  ></div>
                    <a href="helper/uploadpic.php?lightbox[width]=360&lightbox[height]=140&lightbox[iframe]=1" class="lightbox"><div id="logo_uploada">Upload</div></a>
                    <div class="extraInfo">
                    <h3><strong>Photo of your office</strong></h3>
                    <p>Image must be actual photograph of your office</p>
                    </div>
                </div>
                <div class="clearfix"></div>
                    <hr></hr>
                    <!--//office upload bit-->
                    <h3><strong>Office Description</strong> limited to 1000 characters ( no HTML tags )</h3>
                        <div class="field2"><label for="description">Office Description</label> <textarea class="resizable" id="officeDesc" rows="7" cols="50" name="description"></textarea>
                        </div>
                            <div class="clearfix"></div>

CSS：

/*机构资料*/ .noLogo 边框：2px 虚线 #4f8a10; 。不许拍照 边框：2px 虚线 #4f8a10; .imageUploadLogo 背景颜色：#fff； 边框：2px虚线#CECECE； 向左飘浮; 边距：0 15px 0 0； 填充：20px 0； 文本对齐：居中； 宽度：190 像素； .imageUploadPhoto 背景颜色：#fff； 边框：2px虚线#CECECE； 向左飘浮; 边距：0 15px 0 0； 填充：20px 0； 文本对齐：居中； 宽度：190 像素； #logo_uploada 位置：绝对； 左：300px； 顶部：46px； 宽度：180px； 背景：#999999； 字体大小：26px； 字体粗细：粗体； 文本对齐：居中； 颜色：#FFF； 上边距：10px；下边距：10px； -moz-边界半径：5px； -webkit-border-radius：5px； 边框半径：5px； 边距底部：0.4em； 上边距：0.4em； #logo_uploada：访问过， #logo_uploada：链接 颜色：#fff; #logo_uploada：悬停 背景颜色：#3399ff； 光标：指针； .logoInfo 位置：绝对； 左：300px； 顶部：5px； .extraInfo 位置：绝对； 左：300px； 顶部：110px；

根据要求，这就是它在 IE 中的样子：

【问题讨论】：

你在 IE 中看到了什么？所有版本的 IE 都做错了吗？

那么... IE 怎么没有按照你想要的渲染？

你有jsbin之类的在线测试吗？需要在哪个版本的IE下修复？

似乎值得一提的是 hr 不应该有结束标签——它是一个自我终止的元素。

老兄，ie 已经过时了，所以很多东西在那里不起作用，所以我建议不要浪费你的时间，但如果你想要它的选择

【参考方案1】：

审核通过：

1) 看起来您正在为边框使用“hr”标签......当您不需要时。相反，用一个类包装你的整个“portlet-content”和“imageUploadLogo”内容（即“uploadContainer”，它有一个“border-bottom: 1px solid #CECECE; clear: both; display block; padding: 0 0 20px 0 ; 边距: 0 0 20px 0; 宽度: 100%;)

.uploadContainer  border-bottom: 1px solid #CECECE; clear: both; display block; padding: 0 0 20px 0; margin: 0 0 20px 0; width: 100%; 

填充和边距用于间距。然后，您可以删除“hr”标签。

所以你的新容器是：

<div class="uploadContainer">
                <div class="portlet-content">
                    <div class="logoInfo">
                    <h3><strong>Office Image</strong></h3>
                    <p>Width: 160px, Height: 120px | image will be resized automatically</p>
                    </div>
                <div class="imageUploadPhoto noPhoto"><img id="agencyLogo" src="images/office_silhouette.png"  ></div>
                <a href="helper/uploadpic.php?lightbox[width]=360&lightbox[height]=140&lightbox[iframe]=1" class="lightbox"><div id="logo_uploada">Upload</div></a>
                <div class="extraInfo">
                <h3><strong>Photo of your office</strong></h3>
                <p>Image must be actual photograph of your office</p>
                </div>
</div>

2) #logo_uploada 不需要“位置：绝对”。相反，设置“显示：块；”然后边距+填充位置。

3) 看起来你为这两个容器添加了一个额外的“/div”标签……应该被包裹起来，对吧？我发布的#1 应该是一个solid div container供您使用。

如果您使用的是css-reset，您的所有 div 可能都应该重置为使用“display: block”。

希望对您有所帮助！尝试这些样式并返回结果。

【讨论】：

投票+1，因为我知道当你不得不写一个答案时是多么令人沮丧，因为代表没有足够大的能力在任何地方发表评论。

我已经上传图片到上帝我讨厌这些评论框！哈哈。我认为它的相对和绝对冲突

@Andy - 谢谢。我经营着一个开发工作室，发现很难找到时间在这里重新构建......但这是我自己的错。不过还是谢谢你。我只是想发表评论而不是“回答”，因为我的“回答”需要澄清。