两个外部 css 文件具有相同的 div ID '#container' 名称标签,导致两个对象出现定位问题

问题描述 投票:0回答:1

我遇到网页上两个不同对象使用外部 CSS 和外部 js 调用各自函数的问题。 当仅使用一个脚本(页面剥离脚本)时,页面剥离效果在所有页面上显示正常(www.cxchelp.com)。但是,当脚本添加到具有 CSS 表单脚本的页面时,剥离效果会从其位置移动到与 CSS 表单对齐的页面的中间边缘(请参阅:http://www.cxchelp .com/contact_error.html).

我检查了两个外部脚本,发现它们都是由“#container”定位的

我知道他们都使用“#container”这一事实导致了定位问题。但我的问题是我该怎么做才能防止这种冲突?

这件事已经持续了几个小时了,我有点受够了。

这是第一个 .js 脚本(用于页面剥离效果)(部分),其中提到了“#container”;

$('#container').prepend('<div id="jcornerSmall" style=" position:absolute;width:100px;height:100px;z-index:9999;right:0px;top:0px;">

这是联系表单的 CSS 脚本(部分),以及两个对象都卡在的位置;

#container {    
  margin: 0 auto;
  background: #fff;
  width: 580px;
  padding: 20px 40px; 
  text-align: left;
}

大家有什么想法吗?

css html tags conflict
1个回答
0
投票

page-peel-container
类添加到您想要剥离效果的每个页面的主容器中。这意味着页面上的第一个
<div>

在主页上,它看起来像:

<body>
    <div id="container" class="page-peel-container">

在联系页面上,如下所示:

<body>
    <div id="containermain" class="page-peel-container">

等等。

现在,像上次一样,找到 Javascript 中显示

$("#container").prepend
$("#containermain").prepend
的 2 位(如果您在我们第一次失败的尝试后尚未将其更改回来)。替换为
$(".page-peel-container").prepend

如果这仍然不起作用,请告诉我。

© www.soinside.com 2019 - 2024. All rights reserved.