Вопросы Теги

Проблема CSS с положением компонента silverlight. Не могу установить нужную высоту

Я хочу создать простую страницу содержимого с помощью silverlight со следующими требованиями: Страница должна содержать:

  1. верхнее пространство для баннеров (html)
  2. центр - компонент silverlight. и он растянется до размера страницы.
  3. нижнее пространство для баннеров (html)

Выглядит довольно просто, но я столкнулся с проблемой с Internet Explorer 8. Компонент Silverlight имеет небольшие размеры и не растягивается. В других браузерах он работает нормально.

Стили: 

<style type="text/css">
    html, body
    {
        height: 100%;
        overflow: auto;
    }
    body
    {
        padding: 0;
        margin: 0;
    }
    #silverlightControlHost
    {
        height: 100%;
        text-align: center;
    }
</style>

HTML: 

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" style="overflow: hidden;
    height: 100%; width: 100%;">
    <table  frame="none" cellpadding="0" cellspacing="0" style="height: 100%; width: 100%; border:0px solid White;
        padding: 0px;">
        <tr style="background-color: Red; height: 30px; width: 100%;">
            <td>
            </td>
        </tr>
        <tr style="background-color: Blue; height: 100%; width: 100%;">
            <td>
                <div id="silverlightControlHost" style="height: 100%; width: 100%; background-color: Black;">
                              <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
                    width="100%" height="100%">
                    <param name="source" value="ClientBin/test.xap" />
                    <param name="onError" value="onSilverlightError" />
                    <param name="background" value="white" />
                    <param name="minRuntimeVersion" value="4.0.50401.0" />
                    <param name="autoUpgrade" value="true" />
                    <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration: none">
                        <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Получить Microsoft Silverlight"
                            style="border-style: none" />
                    </a>
                </object>
                <iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px;
                    border: 0px"></iframe>
                </div>
            </td>
        </tr>
        <tr style="background-color: Red; height: 30px; width: 100%;">
            <td>
            </td>
        </tr>
    </table>
</body>

Chrome (отлично работает):

alt text

IE8 (не очень хорошо):

alt text

Что с ним не так? Как это исправить?

1
задан Ievgen Naida 18 September 2010 в 14:40
поделиться