我的css样式去哪儿了

Wheres my css styling gone?

本文关键字：css 样式 我的      更新时间：2023-09-26

我在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链接放在每个母版页的标题中，现在工作得很好。多亏了下面的答案，我才得以调试到这个问题。

问题的发展方式只能猜测。

正如您所说的，在添加一些额外的HTML元素之前一切都可以，我想说您可能应该验证您的HTML。通过W3C验证服务并尝试了解出了什么问题。

我也经历过类似的行为，留下一个元素打开。

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

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

如果您不使用Ajax，那么您需要使用W3C School HTML验证器来验证您的HTML。希望这能有所帮助。

使用IE8中的开发工具并检查正在应用的样式。。。您也可以调试Javascript。

相关文章：