Question

我有一个Silverlight applet，其UI只包含一个按钮，我试图将其放置在我的网页上的适当位置。我目前的结果如下：

Current Results

以红色圈出的蓝色元素是我想要按钮的位置，并且正如Firebug高亮显示的那样，它位于包含Silverlight <div>标记的<object>标记的位置。但是，对象本身（以绿色圈出的“Click Me”按钮）大约低200左右。

我的CSS有点复杂（不出意外，我正在尝试做的事情比我在这里展示的要复杂得多），但是为了记录，它在这里，合理地简化了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Engagement Test Page</title>
    <style type="text/css">
        div.alantaHost
        {
            display: block;
            position: relative;
        }

        div.alantaEngageHost
        {
        }

        div.alantaEngageAppHost
        {
            position: relative;
        }
        div.alantaEngageHost_Button
        {
            height: 26px;
            width: 140px;
        }

        button.alantaEngageButton
        {
            position: relative;
            cursor: pointer;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            font-size: large;
        }

        div.alantaEngageAppHost_Button
        {
            height: 26px;
            width: 140px;
        }
        /* Override */
        div.alantaHost_PictureButton
        {
            width: 220px;
            border: 1px solid #a7a7a7;
            color: rgb(0, 0, 0);
            background-color: #fff;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            box-shadow: 8px 8px 11px #888;
            border-radius: 8px;
        }

        /* Override */
        div.alantaEngageHost_PictureButton
        {
        }

        div.alantaHeader
        {
            width: 220px;
            height: 18px;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            margin-top: 4px;
        }

        div.alantaTitle
        {
            margin-left: 10px;
            float: left;
        }

        div.alantaContact
        {
            width: 200px;
            height: 200px;
            margin: 0px 0px 0px 4px;
            padding: 5px;
            background-color: rgb(255, 255, 255);
            text-align: left;
            font-weight: bold;
        }

        img.alantaContactImage
        {
            height: 200px;
            width: 200px;
        }

        div.alantaStartChat
        {
            width: 210px;
            height: 30px;
            margin: 0px 4px;
        }

        button.alantaStartChatButton
        {
            position: relative;
            cursor: pointer;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            font-size: large;
        }

        div.alantaHost_Ad
        {
            width: 300px;
            height: 250px;
        }

        div.alantaContact_Ad
        {
            width: 200px;
            height: 200px;
            float: left;
        }

        div.alantaStartChat_Ad
        {
            width: 75px;
            height: 60px;
            float: right;
        }

        div.alantaAdMessage
        {
            width: 80px;
            float: right;
            text-align: left;
            margin-top: 10px;
        }

        div.alantaEngageAppHost_Ad
        {
            height: 60px;
            width: 70px;
        }
    </style>
</head>
<body>
    <div id="host">
        <div class="alantaHost alantaHost_PictureButton alantaHost_Ad">
            <div style="display: block;" class="alantaEngageHost alantaEngageHost_PictureButton">
                <div class="alantaHeader">
                    <div class="alantaTitle">
                        Ken Smith</div>
                </div>
                <div class="alantaContact alantaContact_Ad">
                    <img class="alantaContactImage" src="http://graph.facebook.com/739004749/picture?type=large"
                        alt="Photo"></div>
                <div class="alantaStartChat alantaStartChat_Ad" align="center">
                    <button style="display: none;" class="alantaEngageButton">
                        Talk to Ken</button></div>
                <div class="alantaAdMessage">
                    I'm looking forward to talking with you!</div>
            </div>
            <div style="top: 2px; left: 224px;" class="alantaEngageAppHost alantaEngageAppHost_Button alantaEngageAppHost_Ad">
                <object type="application/x-silverlight" data="data:application/x-silverlight," id="objMyApp"
                    height="100%" width="100%">
                    <param name="source" value="http://app.dev.alanta.com/ClientBin/SilverlightButton.xap">
                </object>
            </div>
        </div>
    </div>
</body>
</html>

有关为什么Silverlight对象不遵循其包含标记的任何建议？（我应该注意它在IE和Chrome中的行为方式相同，所以它不是浏览器错误。）

Answer 1

我认为你的xaml中的偏移量正在将按钮推到该位置。如果您的根元素是画布，我会将其更改为stackpanel，看看是否修复了它。

Answer 2

我仍然不明白有关绊倒它的所有细节，但它可能与我没有设置alantaEngageHost的高度这一事实有关。我将alantaEngageHost_Ad样式更改为：

div.alantaEngageHost_PictureButton
{
    height: 250px;
}

之后，<button>及其包含<div>标记位于同一位置;然后我可以这样放置它们：

<div style="top: -226px; left: 224px;" class="alantaEngageAppHost alantaEngageAppHost_Button alantaEngageAppHost_Ad">
    <button style="position:relative">HTML Button</button>
</div>

我猜测，当你试图将元素放在<div>标签内并且不足以容纳它们时，必然会出现一些奇怪的CSS交互。只是一个猜测，因为CSS对我来说仍然是一种黑暗和巫术的艺术。

Silverlight applet（<object>标记）不在其包含的<div>标记`</div> </object>中

2 个答案: