1

私は IE と div 内の画像を中央に配置したいスタイルに固有の非常に不十分な問題を抱えており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のみのソリューションの開発者ツールのHTML>レイアウトタブを見ると、オフセットプロパティに問題が反映されていることがわかりました。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>
4

2 に答える 2

0

2回目の編集での私の理論は正しかった。div を display:table-cell に置き換え、cellspacing も cellpadding もないテーブルに置き換えました。それは完璧にレンダリングされました。この理論を確認するために、セルパディング 0 とセル間隔 0 の属性を取り出し、テーブルを再度レンダリングしました。IE と Firefox の両方で、テーブルはデフォルトのセルパディングとセル間隔によってオフセットされていました。

IE 8/9 は、cellspacing="2px" のデフォルトのテーブル属性を持つ display:table-cell をレンダリングします。これらはマークアップ属性であるため、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 に答える