Question

我有一个网站，我正在尝试修改聊天小程序（从异地加载的javascript小程序）。我正在将图形放在其中的一部分并添加一些代码以在我不在线/可用时展开它（它将显示一个表单，我希望整个表单可见）。

一切正常，但Chrome或Firefox上的定位都会失败。当我修复一个时，它打破了另一个。我正在考虑使用浏览器检测来修复它，但我正在使用的定位非常简单。我想知道一个浏览器或另一个浏览器是否没有遵循标准，或者我做错了什么？基本上，我在applet上放置的图像占用了页面上的空间，并在某些情况下将聊天小程序推倒，而不是在其他情况下。

需要移动和桌面支持（目前每个都显示相同）。有问题的页面太大了，无法在此发布，但我会给出一个链接，以便您可以查看源代码（目前在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

我认为你的问题在于这个元素：prog1 = 'python prog1.py' args1 = 'input_1.txt' proc1 = Popen(prog1 + ' ' + args1,stdout=PIPE,stderr=STDOUT, shell=True) for i in proc1.stdout: print i prog2 = 'python prog2.py' args2 = i # the input which is the output of prog1 proc2 = Popen(prog2 + ' ' + args2,stdout=PIPE,stderr=STDOUT, shell=True) for m in proc2.stdout: print m。它是一个带有<div id="ed">的{{1}}，这意味着它将显示块以及将它放在新行之后的任何元素，这就是创建差距的原因。

要解决此问题，请尝试通过添加<div>来更新包装div的样式：

position:relative;

然后将position:relative;的样式更改为#chat-height{ position:relative; }，以便将其绝对定位到包装div。

什么是解决HTML布局问题的最佳方法？

1 个答案: