我对 IE 和样式 display:table-cell.
有一个独特且极其蹩脚的问题。我想将图像置于 div 中,我发现最简单快捷的方法是使用表格或显示:表格单元格;。它适用于所有主流浏览器,但要注意的是 IE 8 和 9 将用这种样式抵消 div。
蓝色轮廓显示div的边界,CSS如下
.user-photo div { height:200px; width:200px; display:table-cell; text-align:center; vertical-align:middle;}
包含 div 的父级具有此 CSS
.user-photo { height:200px; width:200px; border:2px solid black; }
据我所知,这可能是我在常规 HTML 中使用 ASP.NET 标记这一事实造成的问题。我仅使用 html 对此进行了测试,子 div 位于其边界内。
这是上图中显示的 .ascx 控件的代码。
<div id="picture-edit-div" class="p20">
<asp:Label ID="lblErrorMsg" runat="server" Text="" Visible="False" />
<div class="left user-photo">
<asp:PlaceHolder runat="server" ID="plcImage" Visible="True">
<div id="<%= plcImageID %>" ><cms:UserPicture ID="picUser" runat="server" Visible="true" /></div>
</asp:PlaceHolder>
<asp:PlaceHolder runat="server" ID="plcImageActions" Visible="false">
<div id="<%= placeholderID %>" class="f12">PROFILE PHOTO</div>
</asp:PlaceHolder>
</div>
<div class="right user-edit-photo">
<span class="container-upload"><cms:CMSFileUpload runat="server" CssClass="UploaderInputFile" ID="uplFilePicture" size="14" /></span>
<asp:Button ID="btnClearUpload" runat="server" Text="CLEAR" UseSubmitBehavior="False" CssClass="right" />
<p class="mt16 f12">Uploaded files must be under 5MB and one of the following file formats: jpeg, png, bmp.</p>
<p class="mt10 mb20 f12">Image will fit to 200x200 pixels</p>
<asp:Button ID="btnSave" runat="server" Text="SAVE" OnClick="btnSave_Click" />
<asp:Button ID="btnDelete" runat="server" Text="DELETE PHOTO" UseSubmitBehavior="False" CssClass="ml10" />
</div>
<asp:HiddenField runat="Server" ID="hiddenAvatarGuid" />
<asp:HiddenField runat="Server" ID="hiddenDeleteAvatar" />
</div>
这是控件在 firefox 中呈现的方式,在其他浏览器中也类似。
我认为这是 IE 中的偏移错误,但我不能确定。对此问题的任何帮助将不胜感激。
编辑:查看我的纯 HTML 解决方案的开发人员工具中的 HTML> 布局选项卡,我发现问题反射(reflect)在 offset 属性中。 Firefox 在其开发人员工具中没有此属性,因此我假设我的 ASP.NET 标记与该属性有关。
EDIT-2:我到达这里,但可能是 IE 8/9 显示带有默认 cellpadding 和/或 cellspacing 的表格单元格,它们是只能在标记中设置的表格属性。
EDIT-3:为 .ascx 控件呈现的 html
<td class="user-mid">
<!--
<script type="text/javascript">
//<![CDATA[
function UpdateForm(){ ; }
//]]>
</script>-->
<div id="picture-edit-div" class="p20">
<div class="left user-photo" >
<div id="ctl00_plcMain_plcZone_lt_zoneCenter_UserSettings_UserPhoto_plcImage"><img alt="Avatar" src="/CMSModules/Avatars/CMSPages/GetAvatar.aspx?avatarguid=909868d6-120a-4e47-bca8-c4ea13b514a0&maxsidesize=0" /></div>
</div>
<div class="right user-edit-photo">
<span class="container-upload"><input type="file" name="ctl00$plcMain$plcZone$lt$zoneCenter$UserSettings$UserPhoto$uplFilePicture" id="ctl00_plcMain_plcZone_lt_zoneCenter_UserSettings_UserPhoto_uplFilePicture" class="UploaderInputFile" size="14" /><label for="ctl00_plcMain_plcZone_lt_zoneCenter_UserSettings_UserPhoto_uplFilePicture" id="ctl00_plcMain_plcZone_lt_zoneCenter_UserSettings_UserPhoto_lblUpload_uplFilePicture" style="display:none;">Upload file</label></span>
<input type="button" name="ctl00$plcMain$plcZone$lt$zoneCenter$UserSettings$UserPhoto$btnClearUpload" value="CLEAR" onclick="javascript:__doPostBack('ctl00$plcMain$plcZone$lt$zoneCenter$UserSettings$UserPhoto$btnClearUpload','')" id="ctl00_plcMain_plcZone_lt_zoneCenter_UserSettings_UserPhoto_btnClearUpload" class="right" />
<p class="mt16 f12">Uploaded files must be under 5MB and one of the following file formats: jpeg, png, bmp.</p>
<p class="mt10 mb20 f12">Image will fit to 200x200 pixels</p>
<input type="submit" name="ctl00$plcMain$plcZone$lt$zoneCenter$UserSettings$UserPhoto$btnSave" value="SAVE" id="ctl00_plcMain_plcZone_lt_zoneCenter_UserSettings_UserPhoto_btnSave" />
<input type="button" name="ctl00$plcMain$plcZone$lt$zoneCenter$UserSettings$UserPhoto$btnDelete" value="DELETE PHOTO" onclick="return deleteAvatar('ctl00_plcMain_plcZone_lt_zoneCenter_UserSettings_UserPhoto_hiddenDeleteAvatar', 'ctl00_plcMain_plcZone_lt_zoneCenter_UserSettings_UserPhoto_hiddenAvatarGuid', 'ctl00_plcMain_plcZone_lt_zoneCenter_UserSettings_UserPhoto_plcImage' );__doPostBack('ctl00$plcMain$plcZone$lt$zoneCenter$UserSettings$UserPhoto$btnDelete','')" id="ctl00_plcMain_plcZone_lt_zoneCenter_UserSettings_UserPhoto_btnDelete" title="Delete" class="ml10" />
</div>
<input type="hidden" name="ctl00$plcMain$plcZone$lt$zoneCenter$UserSettings$UserPhoto$hiddenAvatarGuid" id="ctl00_plcMain_plcZone_lt_zoneCenter_UserSettings_UserPhoto_hiddenAvatarGuid" />
<input type="hidden" name="ctl00$plcMain$plcZone$lt$zoneCenter$UserSettings$UserPhoto$hiddenDeleteAvatar" id="ctl00_plcMain_plcZone_lt_zoneCenter_UserSettings_UserPhoto_hiddenDeleteAvatar" />
</div>
</td>
最佳答案
我在第二次编辑中的理论是正确的。我用一个没有 cellspacing 和 cellpadding 的表格替换了 display:table-cell 的 div。它呈现完美。为了证实这个理论,我取出了 0 cellpadding 和 0 cellspacing 的属性并再次渲染了表格。在 IE 和 firefox 中,表格都被默认的 cellpadding 和 cellspacing 偏移了。
IE 8/9 渲染 display:table-cell,默认表格属性为 cellspacing="2px"。由于这些是标记属性,因此无法使用 CSS 进行更改。
关于asp.net - Internet Explorer 8 & 9 向样式显示为 :table-cell 的 div 添加偏移量或边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13092090/