DIV与DIV之间的如何无缝隙?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DIV与DIV之间的如何无缝隙?相关的知识,希望对你有一定的参考价值。

2个黑色背景的DIV想拼接咱一起,但是中间总有一条白色背景,怎么解决?下面是截图:还有,我这里有个整体的页面图片,但是对布局还不太清楚,如果有热心的朋友,希望能帮我看一下,我的QQ是678714,加的时候注明一下,谢谢!我还有7000+的分,只要能帮我解决问题,分全给你都可以,谢谢!

默认编写html代码时候div与div之间,在浏览器不兼容的情况下会出20个像素左右的空隙,在引用的CSS文件开头加一句代码,强制所有对象内外边距为0,即可解决。

 *margin:0px;padding:0px

用css定义方法可能由于IE对CSS兼容性还会出现空隙,在开头把边距清零相当于将各种浏览器的标准重置。两个div中的紧密排列的写法:

<div style="border:solid 1px #000; width:100px;height:100px; float:left;margin:0;display:inline"></div>
<div style="border:solid 1px #000; width:100px;height:100px;float:left;display:inline"></div>
参考技术A 截图呢?问题描述也不清楚。 参考技术B divpadding:0;margin:0;

哪有那么复杂,加上上面这一句搞定
参考技术C 自己百度下:ie3像素bug。
很常见基本的问题哦。

如何使 iframe 具有指针事件:无;但不是在那里面的一个div上?

【中文标题】如何使 iframe 具有指针事件:无;但不是在那里面的一个div上?【英文标题】:How can you make an iframe have pointer-events: none; but not on a div inside that? 【发布时间】:2014-06-13 08:16:02 【问题描述】:

我有一个带有继承 pointer-events: none; 的 iframe,但是当我在带有 pointer-events: auto; 的 iframe 中插入 &lt;div&gt; 时,div 不会对点击或任何鼠标悬停事件做出反应。

原因是iframe&lt;div style="position:fixed;"&gt; 内 所以它有点像一个小菜单。但我希望用户点击iframe,而不是通过 iframe 中的链接和 div。

是的,它绝对需要保持 iframe。

我怎么能绕过这个?我什至可以绕过这个吗?

这是一个简单的例子:jsfiddle.net/MarcGuiselin/yLo119sw/2

【问题讨论】:

你能在jsfiddle.net 上创建一个演示来显示问题吗? 给你:jsfiddle.net/MarcGuiselin/yLo119sw/1 原谅我的幽默尝试 嗨@mar​​c-guiselin,我也有同样的问题。我正在努力寻找方法,但没有运气。如果你能告诉我你的解决方法,如果你找到了,我将不胜感激......谢谢。 @hosjay 不幸的是我没有找到 【参考方案1】:

根据您在 jsfiddle 上上传的示例,您正在使用 position:absolute... 将 z-index 添加到“您无法点击我,因为我在 iframe 后面”按钮允许我点击它。

Z-Index

编辑:如果您想在除一个div 之外的任何地方执行pointer-events: none;,您可以在每个element 中添加pointer-events 而不是iframe。根据您在小提琴中的示例,如果您想保存 Nicholas Cage 但阻止其他事件,您可以执行以下操作:

switchbutton.onclick=function()
   this.innerHTML="reload to reset";
   //iframe.style.pointerEvents="none";
   cantclick.innerHTML="You can click me now! :)";
   iframe.contentDocument.body.innerHTML="<button>You can't click me now because my parent iframe is click-through! :(</button><br>or save this gorgeous image of your favorite actor which may or may not be relavant to the problem.<br><img id='nicholasCage' src='http://media2.popsugar-assets.com/files/2014/01/06/008/n/1922283/131b4126c7b8738f_thumb_temp_image333458751389045360.jpg.xxxlarge/i/Best-Nicolas-Cage-Memes.jpg'/>";

   var iframeBody = iframe.contentDocument,
       elements = iframeBody.querySelectorAll("*"),
       i,
       len = elements.length;

   for(i=0;i<len;i++)
       elements[i].style.pointerEvents="none";
   

   iframeBody.getElementById("nicholasCage").style.pointerEvents="all";

如果你可以使用 jQuery,你可以使用 $("iframe *").css("pointer-events","none"); 更快地完成它

【讨论】:

显然。目标不是在 iframe 上单击按钮,而是要弄清楚当 mouseevent 不在 iframe 内的某个东西上时如何允许 mousevents 穿透 iframe 对不起,我想我没听懂(我的错,因为我的英语有点烂......)。好的,现在我已经深入检查了你的 jsfiddle,当出现 NCage 时,你想点击按钮“你不能点击我......”?你可以使用javascript来做到这一点,这是你要求的吗? (再次道歉) 好的,所以你想禁用 iframe 中的所有东西,除了(给出的例子)NCage 的图像。你可以使用 jQuery 还是只使用 javascript? 不,这是一个 css/html 的东西。例如,如果我想要一个 chrome 扩展在 iframe 内的每个页面中插入一个菜单(这样它就不会弄乱它所在的网站)并且该菜单覆盖整个页面。如果我要单击 iframe 的中间(没有菜单),我仍然会单击 iframe 而不是它后面的东西。你不能用javascript有效地做到这一点。这将非常复杂,并且不适用于大多数网站。但是,如果您可以通过某种方式使 iframe 点击,则可以解决所有这些问题。这就是我要找的。​​span> 啊啊好抱歉,我没听懂!好吧,在这种情况下,我不知道您是否可以仅使用 CSS... 我使用 JS 得到它。在此示例中,您可以同时单击它们,但这有点棘手...jsfiddle.net/Kamae/e51zykkh 它只是使 iframe “z-index -1”,获取鼠标位置,触发点击,并使 iframe “z- index 0" 再次...这是我能做的,抱歉,如果这对你没有帮助。祝你好运!【参考方案2】:

你试过了吗?

pointer-events: inherit;

我知道你已经得到了答案,但我认为这也可能有效。

【讨论】:

【参考方案3】:

不要给整个 iframe pointer-events: none。就在 iframe 里面放一条 CSS 规则 body * pointer-events: none;

这样 iframe 不会阻塞事件,但是 iframe 内的元素不可点击。

【讨论】:

我们的目标是弄清楚当点击不在 iframe 内的某物上时,如何让点击穿透 iframe。您希望能够点击 iframe 内的内容,否则会破坏目的。【参考方案4】:

您无法做到这一点,因为这将与点击劫持一起成为另一个安全问题。

iframe 中的样式与主机站点中的样式没有任何关系。因此,如果您甚至在 iframe 上设置 z-index/pointer-events 或其他内容,并尝试覆盖其中的规则,则它不会以任何方式应用于主机站点规则。

那么解决办法是什么? 您必须将 iframe 拆分为多个 iframe,并修改它们的位置。

【讨论】:

【参考方案5】:

我已经搜索了很多并自己想出了一个解决方法。

    // the iframe element
    const frame = document.getElementsByTagName("iframe")[0];
    frame.onload = function () 
      const frameDocument = frame.contentDocument;
      document.addEventListener("mousemove", onMouseMove, true);
      frameDocument.addEventListener("mousemove", onMouseMove, true);

      function onMouseMove(e) 
        let coord;
        if (e.currentTarget === document) 
          coord = 
            x: e.pageX - frame.offsetLeft,
            y: e.pageY - frame.offsetTop,
          ;
         else 
          coord =  x: e.clientX, y: e.clientY ;
        

        const el = frameDocument.elementFromPoint(coord.x, coord.y);
        // you can compare to your own element if needed
        frame.style.pointerEvents = !el || el === frameDocument.body ? "none" : "auto";
      
    ;

iframe 将自动切换其pointer-events,所有事件都可以无缝运行。

【讨论】:

以上是关于DIV与DIV之间的如何无缝隙?的主要内容,如果未能解决你的问题,请参考以下文章

两个div之间有空隙

div和img之间的缝隙问题

我用div+css进行网页布局,但是两个相邻div之间有一条缝隙,怎么回事

两个div上下布局,中间有一条白色的缝隙,怎么解决!!!

如何用css设置div与div之间的间距呢?

css+div 怎么实现文字无缝滚动