修复HTML布局问题的最好方法是什么?

Question

我有一个网站，我试图修改一个聊天小程序(一个javascript小程序从场外加载)。我的定位图形超过它的一部分，并添加一些代码来扩展它，当我不在线/可用(它会显示一个表单，我希望整个表单可见)。

一切都很好，除了在Chrome或Firefox上定位失败。当我修好一个的时候，另一个就坏了。我正在考虑使用浏览器检测来修复它，但我使用的定位非常简单。我想知道如果一个浏览器或其他不遵循标准，或者我做错了什么?基本上，我放在小程序上的图像占用了页面空间，在某些情况下会将聊天小程序推到下面，而在其他情况下则不会。

需要移动和桌面支持(目前在每个上显示相同)。有问题的页面太大了，不能在这里发布，但我将提供一个链接，以便您可以查看源代码(目前有黑客可以在Firefox上正确显示，而Chrome显示出很大的差距)。https://eddon.systems/joomla/index.php/contact-evan

下面是有问题的代码:

<div id="chat-height" style="height: 24em;">
<div id="ed" class="pull-right" style="z-index: 1000006; position:relative; right: 0; top: -3em;">
  <img src="/img/grasshopper.png" />
</div>
<div id='tawk_55b4804ed05623730af6f54a' style="position: relative; top: 0em;"></div>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var $_Tawk_API={embedded:'tawk_55b4804ed05623730af6f54a'},$_Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/55b4804ed05623730af6f54a/19r4labog';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);})();
$_Tawk_API.onStatusChange = function(status){
  if (status === 'offline'){
        document.getElementById('chat-height').style.height="38em";
        document.getElementById('tawkchat-maximized-iframe-element').style.height="38em";
        document.getElementsByClassName("contact-mobile")[0].style.visibility="visible";
  } else {
    document.getElementById('chat-height').style.height="24em";
    document.getElementById('tawkchat-maximized-iframe-element').style.height="23.5em";
    document.getElementsByClassName("contact-mobile")[0].style.visibility="hidden";
  }
}
</script>
<!--End of Tawk.to Script-->
</div>

Answer 1

我认为你的问题是这个元素:<div id="ed">。它是一个<div>和position:relative;，这意味着它将显示块，之后的任何元素都将放在新行上，这就是创建间隙的原因。

要修复它，请尝试通过添加position:relative;来更新您的包装div样式:

#chat-height{
    position:relative;
} 

然后将<div id="ed">的样式更改为position:absolute;，以便将其完全定位到您的换行div。