Question

我有两个简单的页面用于测试。

在我的第一页上，我使用$.load()从第二页加载div。

两个页面都包含进行转弯的插件。如果我加载从第二页加载div的第一页，则转弯不起作用。但是，如果我自己加载第二页，转弯确实有效，所以它与$ .load（）有关。

以下是一些代码，来自第1页：

 <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $("#load").load('testLoadCornering2.aspx #loadMe');   
            });
        </script>

        <script src="resources/js/curvycorners.js" type="text/javascript"></script>

        <script src="resources/js/curvycorners.src.js" type="text/javascript"></script>

        <link href="resources/css/main.css" rel="stylesheet" type="text/css" />
        <link href="resources/css/buttons.css" rel="stylesheet" type="text/css" />
        <link href="resources/css/confirm.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="load" class="BWTable">
        </div>
        </form>
    </body>
    </html>

您看到该页面正在尝试加载第二个div。

第二页：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <script src="resources/js/curvycorners.js" type="text/javascript"></script>

    <script src="resources/js/curvycorners.src.js" type="text/javascript"></script>

    <link href="resources/css/main.css" rel="stylesheet" type="text/css" />
    <link href="resources/css/buttons.css" rel="stylesheet" type="text/css" />
    <link href="resources/css/confirm.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="loadMe" class="BWTable">
        <p>
            Test Test Test Test Test Test Test
        </p>
    </div>
    </form>
</body>
</html>

它用于舍入的CSS（以及圆角插件）：

 background-image: url(         '../../images/wp_form2.gif' );
 border: solid 1px #000000;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 color: white;
 -moz-border-radius: 10px; /* Rounded corners plugin */
 -webkit-border-radius: 10px; /* Rounded corners plugin */

在Firefox中，这样可以正常工作 - 但在IE中（特别是版本8，我一直在尝试），角落永远不会四舍五入。

重申一下，手动转到IE 8角落的第二页，只有在使用.load（）方法时才会这样做。

任何帮助表示感谢。

注意：我知道我不应该在两个页面上添加样式表，因为它们应该从第一页加载，但我已添加它们以向您显示它正在尝试的完整代码做。谢谢，瑞奇

Answer 1

这里的问题是，只有在Firefox完全支持CSS3圆角的情况下，曲线修复者才能进入生活，因此当它在Firefox中运行时，这只是因为曲线修复者并没有尝试做任何事情。

您的JQuery加载位于文档就绪块中，因此在整个页面加载之前不会执行，包括（我相信）javascript，因此在加载第二个页面div之前会运行一些曲线。您需要找到一种方法来在第二页div之后加载curvycorners脚本，或者在加载第二页div后找到如何调用curvycorners来重新分析页面。

来自curvycorners文档：

如果您需要更改某些属性   或者可重绘元素的样式，   这不应该直接完成   通过DOM。相反，拥有   确定了DOM对象（例如，使用   document.getElementById（）），调用

curvyCorners.adjust(DOMObj, propertyName, newValue);

其中：

DOMObj是带有的元素对象   需要的className curvyRedraw   改变;
  propertyName是的名称   没有前导点的财产;如果   它应该是一种风格属性   表达为'style.property'   newValue是新值，例如   '没有'。

curvyCorners.adjust（）必须   取所有三个参数描述   以上。它没有返回有用的值。

Answer 2

谢谢拉撒路。你把我放在正确的轨道上，我已经找到了解决方案，这是有效的。我觉得现在有点傻了！

再次感谢。

第1页：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <link href="resources/css/main.css" rel="stylesheet" type="text/css" />
    <link href="resources/css/buttons.css" rel="stylesheet" type="text/css" />
    <link href="resources/css/confirm.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(document).ready(function() {

        $("#load").load('testLoadCornering2.aspx #loadMe');  

            $.getScript('resources/js/curvycorners.js', function() {
                $(this).init();
            });
            $.getScript('resources/js/curvycorners.src.js', function() {
                $(this).init();
            });        
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="load" class="BWTable">
    </div>
    </form>
</body>
</html>

第2页：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>  
</head>
<body>
    <form id="form1" runat="server">
    <div id="loadMe" class="BWTable">
        <p>
            Test Test Test Test Test Test Test
        </p>
    </div>

    </form>
</body>
</html>

jQuery .load（） - 角落插件在IE中不起作用 - Firefox没问题

2 个答案: