asp.net - Internet Explorer 8 & 9 向样式显示为 :table-cell 的 div 添加偏移量或边距

Question

我对 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&amp;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(&#39;ctl00$plcMain$plcZone$lt$zoneCenter$UserSettings$UserPhoto$btnClearUpload&#39;,&#39;&#39;)" 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(&#39;ctl00_plcMain_plcZone_lt_zoneCenter_UserSettings_UserPhoto_hiddenDeleteAvatar&#39;, &#39;ctl00_plcMain_plcZone_lt_zoneCenter_UserSettings_UserPhoto_hiddenAvatarGuid&#39;, &#39;ctl00_plcMain_plcZone_lt_zoneCenter_UserSettings_UserPhoto_plcImage&#39; );__doPostBack(&#39;ctl00$plcMain$plcZone$lt$zoneCenter$UserSettings$UserPhoto$btnDelete&#39;,&#39;&#39;)" 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>

Answer 1

我在第二次编辑中的理论是正确的。我用一个没有 cellspacing 和 cellpadding 的表格替换了 display:table-cell 的 div。它呈现完美。为了证实这个理论，我取出了 0 cellpadding 和 0 cellspacing 的属性并再次渲染了表格。在 IE 和 firefox 中，表格都被默认的 cellpadding 和 cellspacing 偏移了。

IE 8/9 渲染 display:table-cell，默认表格属性为 cellspacing="2px"。由于这些是标记属性，因此无法使用 CSS 进行更改。