Question

我在Internet Explorer 8及以上版本中遇到过问题。我从sitecore创建动态内容，但是一旦我在该项目的页面上添加了一定数量的项目，我从页面的某个部分开始的css决定不将其内容设置为奇怪的。

我知道下面有很多，但是当我在sitecore中创建一个项目时，这组代码会多次创建：

前端HTML：

<div class="<%=uniqueID %>">
    <div class="compareRatesSlideSpot">

         <div class="headerContent">
                <div class="tableContainer">
                    <div class="exchangeProvider"><%=exchangeProvider %></div>
                    <div class="exchangeRate"><%=exchangeRate %></div>
                    <div class="transferCharges"><%=transferCharges %></div>
                    <div class="amountYouGet"><%=amountYouGet %></div>
                </div>
                <div class="Toggle">
                    <span> 
                        Learn more <img src="/images/arrow_open.png" /> 
                    </span>
                </div>
          </div>



          <div class="Content">

            <%=content %>

          </div>



    </div>
    <div class="Shadow"></div>
</div>

Javascript：

<script type="text/javascript">

    $(document).ready(function() { 
        $(".<%=uniqueID %> .headerContent").css("color", "<%=fontColor %>");
        $(".<%=uniqueID %> .tableContainer").css("background-color", "<%=bgColor %>");
        $(".<%=uniqueID %> .Toggle").css("color", "#000000");
    }); 

    var <%=uniqueID %>isToggled = 0;

    $(".<%=uniqueID %> .Toggle").hover(
      function () {
          $(this).css("color", "<%=secondaryColor %>");
      },
      function () {
          $(this).css("color", "#000000");
      }
    );

  $(".<%=uniqueID %> .Toggle").click(function () {

      $(".<%=uniqueID %> .Content").slideToggle("slow");
    if (<%=uniqueID %>isToggled == 0) {
        <%=uniqueID %>isToggled = 1;
        $(".<%=uniqueID %> .Toggle span").html('Minimise <img src="/images/arrow_close.png" />');
    } else if (<%=uniqueID %>isToggled == 1) {
        <%=uniqueID %>isToggled = 0;
        $(".<%=uniqueID %> .Toggle span").html('Learn more <img src="/images/arrow_open.png" />');
    };

});
</script>

我需要第二双眼睛才能找到出错的地方，我已经盯着它看了好几个小时但仍然没有成功。

解决方案：

结果发现我们在用户控件中有用户控件的css链接，该链接被加载到不同的母版页中。我把相关的css链接放到每个母版页的头部，现在工作正常。感谢下面的答案，我能够将其调试到这个问题。

Answer 1

问题的方式只能猜测。

正如你所说，在你添加一些额外的HTML元素之前一切正常我会说你可能应该验证你的HTML。通过它through the W3C validation service并尝试了解出了什么问题。

我通过打开元素来体验类似的行为。

<div>
    ....
<div> <!-- forgot to close the div and actually oppened a new one -->
      <!-- can mess with the whole layout -->

Answer 2

您是否在表单上使用AJAX？您是否在提交时添加HTML（例如在用户输入之后）？如果两个答案都是肯定的，那么答案是doucment.ready（）函数在ajax回发后不会被调用。您需要使用ScriptManager调用javascript。

如果您不使用Ajax，则需要使用W3C School HTML validator验证HTML。希望这会有所帮助。

Answer 3

在IE8中使用Developer Tool并检查正在应用的stype ...您也可以调试Javascripts。

我的css样式消失了吗？

3 个答案: