javascript - 必须删除并重新应用 CSS 属性才能使其工作。可能的 CSS 错误？

Question

更新 :在阅读这篇文章并说您需要更多代码来复制问题之前，我要问的一个简单问题是:

“当该属性已经在该元素上并且应该在默认情况下工作时，您是否曾经不得不删除并重新应用元素上的 CSS 属性以应用该样式？如果是这样，您的解决方案是什么，或者您是知道最终导致问题的原因是什么吗？”

更新 2 :我不是 100% 确定，但这可能只是 font-size 的问题属性并使用 Javascript 动态更改它。在 Javascript 中重新调整大小的外部和/或内部元素的 CSS 可以正常工作，这个问题似乎只发生在字体大小调整中，尤其是。也许周围的 HTML 的 CSS 没有捕捉到 font-size关于内存密集型样式更改(如我们的调整大小功能)。只是一个猜测。

这篇文章的其余部分是澄清我在说什么的一种手段。

这个问题可能是 Chrome 独有的。澄清一下，我们的应用程序由我们的销售团队在内部使用，并且该元素专门用于开发和现场使用的 Chrome。在其他浏览器中打开它时，样式已经完全关闭，因为我们只需要创建与 Chrome 兼容的 CSS(我是如何幸运地获得这样的位置，我不知道，哈哈)。

我在我的编码生涯中只遇到过几次这个问题，我认为这是 CSS 中的一个错误，但可能只是 Javascript 在 DOM 中进行样式更改和父容器 CSS 由于可能而无法适应更改之间的罕见错误Javascript 将样式应用到 HTML 和 CSS 不更新以适应之间的内存限制或轻微的处理延迟。我认为这是一个重要的问题，因为我认为每个前端 Web 开发人员在他们职业生涯的某个阶段都已经或将会遇到这个问题。

情况

简而言之，我们的 body 内部有一个容器，我们使用 Javascript 将其调整为相对于窗口大小的 16:9 纵横比。截取了整个窗口的屏幕截图。如您所见，我们在浏览器窗口(黑色区域，即主体)内按比例调整了内部容器的大小。内部容器是我们应用程序的所有内容显示的地方:



我们的 CSS 尽可能使用百分比构建。我们构建了一个“resizeUI”函数，主要用于根据内部屏幕的当前宽度/高度比更改字体大小，尽管该函数中还有其他元素也可以在窗口重新大小时重新调整大小。窗口总是完美地重新调整大小，任何需要根据内部窗口的宽度/高度像素比进行特定大小调整的内容都可以按预期工作，子元素的基于百分比的 CSS 会适当调整。但是……

问题

当通过单击并拖动(增量调整大小)来调整浏览器窗口的大小时，页面上的所有内容都会完美地调整大小。但是，当窗口大小急剧变化时，立即全屏(最大化)变小(还原)，反之亦然，顶部菜单中的字体大小将更改但父级的 CSS li不会调整以适应新的字体大小，除非我取消选中(删除)它是 padding属性并重新检查它(重新添加它)。当我这样做时，它工作正常。 li容器真的只有一个 padding:1%因此，通常会根据随字体重新调整大小而变化的内部跨度大小来正确调整其大小。

家长 li应该自动适应内部span的变化字体大小。我对此持肯定态度，因为家长 li当我在检查器中即时修改菜单的字体大小或文本长度时，容器将自动重新调整自身大小。

这是在加载或增量窗口大小更改时通常的样子:



下面是当我使用 Maximize 从小窗口尺寸变为全屏时的样子:



我的(hacky)修复

我让它起作用的唯一方法是删除 <li> 的填充重新调整大小函数顶部的元素，然后在重新调整字体大小的行之后在重新调整大小函数的底部重新应用它。但是，这在 50% 的情况下有效。只有在重新调整大小函数的底部放置 100 毫秒超时以重新应用填充时，我现在才能 100% 地工作。

为了提供帮助，这是我正在使用的一个非常基本的代码示例。 ul自动调整其内部元素的大小:

相关HTML

<ul>
  <li class="menu-items><span>Item 1</span></li>
  <li class="menu-items><span>Item 2</span></li>
  <li class="menu-items><span>Item 3</span></li>
  <li class="menu-items><span>Item 4</span></li>
  <li class="menu-items><span>Item 5</span></li>
</ul>

相关CSS

ul {
  position:absolute;
  top:0;
  right:2%;
  text-align:center;
}
.menu-items {
  padding: 1%;
}

相关Javascript

什么工作大约是时间的 1/2

function resizeUI(){
  $('.menu-items').css('padding','0');
  //Random other elements being re-sized
  $('.menu-items span').css('font-size', properRatio + "px");
  //More elements being resized
  $('.menu-items').css('padding','1%');
}

每次都有效

function resizeUI(){
  $('.menu-items').css('padding','0');
  //Random other elements being re-sized
  $('.menu-items span').css('font-size', properRatio + "px");
  //More elements being re-sized
  setTimeout(function(){  
    $('.menu-items').css('padding','1%');
  }, 100);
}

终极问题

有没有其他人在使用应该适应元素大小调整的 CSS 时遇到过类似的问题？我觉得这是 Javascript 和 CSS 之间的内存问题或错误，因为必须设置超时是我让它 100% 工作的唯一可靠方法，而且，这仅发生在巨大的即时更改中在窗口大小(最大化还原，或反之亦然)但不是手动，更小，增量调整大小。抱歉有这么冗长的帖子/问题，但我之前遇到过几次这个奇怪的错误，必须删除并重新应用 CSS 属性才能使其正常工作，我相信其他开发人员也有。

Answer 1

填充实际上正在起作用。每个单位(div 或您使用的任何单位)均与前一个单位重叠，因为您总共超过了 100% 的 View 宽度。它们是从左到右构建的，当它达到允许的最大尺寸的末尾时，它们都将同样地推过之前的那些。填充也会影响 div 内部的元素，不会影响自身外部的 div。所以它们都是正确的大小，但你还没有建立一个规则来阻止 div 重叠。 margin 可以做到这一点，但如果它们超过所需大小的 100%，您将不得不以某种方式处理溢出。您可以尝试使用 auto 进行填充，但边距可能会更好。否则，您将不得不调整大小和百分比以使其适合最大允许宽度。查看 CSS 盒模型 here .