Sitecore中的页面预览问题

我已经在Sitecore中部署了我的第一个页面。但在“内容编辑器预览”模式下，它的渲染并不完美

原始html:

下面有导航菜单和横幅。在它们后面是一个白色透明的覆盖层&覆盖层后面是一个涂鸦背景图像

从体验编辑器查看：

设置图标偏移了。白色覆盖现在位于Sitecore菜单上方，防止编辑

浏览器控制台中出现错误：
未捕获类型错误：element.dispatchEvent为 不是函数-prototype.js:5734
未捕获类型错误： element.attachEvent不是函数-prototype.js:5653

在内容编辑器中查看：

当您看到菜单移到图标时，它被渲染为平板电脑。我明白，这是因为预览面板的尺寸。 但是，如果是这种情况，作者将如何编辑/查看正确的设计

Prototype.js不是站点正在使用的文件。所以，它必须来自Sitecore

我猜，某些CSS道具没有得到尊重（比如位置、转换）

---

这是虫子吗。如何解决这个问题。我已经登录了不同的浏览器（如chrome和firefox）。这与prototype.js的冲突是一样的。Sitecore在体验编辑器中使用此选项

如果您在站点中使用jQuery，这里有一篇关于这方面的知识库文章：

要解决此问题，需要在无冲突模式下运行jQuery。有几种方法可以做到这一点。下面是一个简单的例子：

<!-- Putting jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>

var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.

$j(document).ready(function() {
    $j( "div" ).hide();
});

// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
    var mainDiv = $( "main" );
}

</script>

var$j=jQuery.noConflict（）；
//$j现在是jQuery函数的别名；创建新别名是可选的。
$j（文档）.ready（函数（）{
$j（“div”）.hide（）；
});
//$变量现在具有原型含义，这是
//document.getElementById（）。下面的mainDiv是一个DOM元素，而不是jQuery对象。
window.onload=函数（）{
var mainDiv=$（“主”）；
}

您可以在jQuery网站上找到更多信息：

---

您还需要小心使用CSS-不要绝对将元素放在浏览器顶部，始终确保它们与容器相对，以便可以正确添加和定位Sitecore EE DOM元素。

我有两个类似的问题。（i） 这些设计已经由另一个团队开发（通常是这样，不是吗）。如果每个页面都有许多.js文件，那么是否需要在每个js文件中执行无冲突声明。（ii）设计师不知道页面是在另一个界面（如Sitecore）中查看的，因此定位元素时牢记Sitecore是毫无疑问的。那怎么办呢。请给出建议。对于定位元素，您实际上没有选择权。前端团队必须与Sitecore合作，而不是反对它，如果您希望体验编辑器是一个不错的体验：）至于JS，这一切取决于他们如何编写JS。TBH-一个好的前端团队应该使用和模块或闭包或类似的东西来编写代码，这样可以让他们轻松实现无冲突模式。或者-我相信这个没有冲突的问题在以后的版本中已经修复。