1

我对 IE 有一个独特且极其蹩脚的问题，display:table-cell.我想在 div 中将图像居中的样式，我发现最简单快捷的方法是使用 table 或 display:table-cell;。它适用于所有主流浏览器，但问题是 IE 8 和 9 会用这种风格抵消 div。

IE 示例

蓝色轮廓显示了具有以下 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 中的呈现方式，在其他浏览器中也是如此。 FF 示例

我认为这是 IE 中偏移的错误，但我不能确定。对此问题的任何帮助将不胜感激。

编辑：查看开发人员工具中的 HTML>layout 选项卡以获取我的仅 HTML 解决方案，我发现问题反映在 offset 属性中。Firefox 在其开发人员工具中没有此属性，因此我认为我的 ASP.NET 标记与该属性有关。

EDIT-2：我到达这里，但可能是 IE 8/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>
4

2 回答 2

0

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

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

于 2012-10-26T23:01:38.293 回答
0

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

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

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

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

于 2013-07-16T08:10:25.810 回答