Internet Explorer 8和9使用样式display:table-cell向div添加偏移量或边距

Question

我有一个独特的和非常糟糕的IE和样式的问题，我想要居中的图像在一个div，我发现最简单和最快的方法是使用表格或显示：display:table-cell. -display:table-cell.；。它适用于所有主流浏览器，但问题是IE8&9会用这种风格来抵消div的影响。

​

蓝色轮廓显示了带有以下CSS的div的边界

 .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 only解决方案的开发人员工具中的HTML>layout选项卡，我发现问题反映在offset属性中。Firefox的开发人员工具中没有这个属性，所以我假设我的ASP.NET标记正在破坏这个属性。

EDIT-2:我说到这里了，但是IE8/9可能用默认的单元格边距和/或单元格间距来显示表格单元格，这是只能在标记中设置的表格属性。

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

我在第二版中的理论是正确的。我用display: table -cell替换了div，换成了没有单元格间距和单元格填充的表格。它渲染得很完美。为了证实这一理论，我取出了0单元格边距和0单元格间距的属性，并再次渲染了表格。在IE和firefox中，表格都被默认的单元格边距和单元格间距所偏移。

IE8/9渲染显示:表格-具有默认表格属性cellspacing="2px“的单元格。由于这些都是标记属性，因此不能使用CSS进行更改。

Answer 2

您可以尝试将以下样式元素添加到包含div (.user-photo)：

display: table-row;
border-spacing: 0;
border-collapse: collapse;

这应该与table元素的cell-spacing属性具有相同的效果。

我遇到了类似的问题，并在这里找到了我的灵感：Set cellpadding and cellspacing in CSS?