相关疑难解决方法(0)

我想创建一个div可以随着窗口宽度的变化而改变宽度/高度的东西.

是否有任何CSS3规则允许高度根据宽度改变,同时保持其宽高比？

我知道我可以通过JavaScript实现这一点,但我更喜欢只使用CSS.

为什么在下面的代码中高度div大于img？图像下方有一个间隙,但它似乎不是填充/边距.

图像下方的间隙或额外空间是多少？

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}

<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

每隔一段时间,Chrome都会错误地呈现完全有效的HTML/CSS或根本不呈现.通过DOM检查器深入挖掘通常足以让它实现其方式的错误并正确地重绘,因此可以证明标记是好的.这种情况在我正在进行的项目中经常(并且可预测地)发生,因为我已经将代码放在适当位置以在某些情况下强制重绘.

这适用于大多数浏览器/操作系统组合:

    el.style.cssText += ';-webkit-transform:rotateZ(0deg)'
    el.offsetHeight
    el.style.cssText += ';-webkit-transform:none'

如在,调整一些未使用的CSS属性,然后询问一些强制重绘的信息,然后取消对该属性的破坏.不幸的是,Chrome for Mac背后的聪明团队似乎找到了一种方法来获得offsetHeight而无需重绘.从而杀死了一个有用的黑客.

到目前为止,我想出的最好的方法是在Chrome/Mac上获得同样的效果:

    $(el).css("border", "solid 1px transparent");
    setTimeout(function()
    {
        $(el).css("border", "solid 0px transparent");
    }, 1000);

实际上,强制元素跳跃一点,然后冷却一秒钟然后再跳回来.更糟糕的是,如果你将超时时间降低到500毫秒以下(不太明显),它通常不会产生预期的效果,因为浏览器在返回其原始状态之前不会重新绘制.

有人愿意提供适用于Chrome/Mac的重绘/刷新黑客(最好是基于上面的第一个例子)的更好版本吗？

更新:在阅读本文并说你需要更多代码来复制问题之前,我要问的一个简单问题是:

"你有没有必要删除并重新应用一个元素的CSS属性,以便当该属性已经在该元素上并且应该默认工作时应用该样式？如果是这样,你的解决方案是什么,或者你做了什么？知道最终导致问题的原因是什么？"

更新2:我不是100%肯定,但这可能只是font-size属性的问题,它使用Javascript动态更改.在Javascript中重新调整大小的外部和/或内部元素的CSS可以正常工作,这个问题似乎只发生在字体大小调整上.也许周围的HTML的CSS没有捕获font-size内存密集型样式更改(比如我们的resize函数).只是一个猜测.

这篇文章的其余部分是澄清我所谈论的内容的一种手段.

此问题可能是Chrome独有的问题.为了澄清,我们的应用程序由我们的销售团队在内部使用,该项目专门针对Chrome开发和现场使用.当在其他浏览器中打开它时,样式已经完全关闭,因为我们只需要创建我们的CSS以符合Chrome标准(我很幸运能找到这样的位置,我不知道,哈哈).

我在编码生涯中只遇到过这个问题几次,我认为这是CSS中的一个错误,但可能只是Javascript在DOM中进行样式更改和父容器CSS之间的一个罕见错误,因为它不能适应变化内存约束或Javascript将样式应用于HTML和CSS不更新以适应之间的延迟.我认为这是一个重要的问题,因为我认为每个前端Web开发人员在其职业生涯的某个阶段已经或将会遇到这个问题.

情况

为了使它尽可能短,我们在我们的体内有一个容器,我们使用Javascript来调整相对于窗口大小的16:9宽高比.取了整个窗口的截图.正如您所看到的,我们在浏览器窗口(黑色区域,即主体)内按比例调整内部容器大小.内部容器是我们的应用程序的所有内容显示的位置:

我们的CSS尽可能使用百分比构建.我们构建了一个'resizeUI'函数,它主要用于根据内部屏幕的当前宽度/高度比来改变字体大小,尽管该函数中还有其他元素也可以在窗口重新调整大小时重新调整大小.窗口总是完美地重新调整尺寸,并且基于内部窗口的宽度/高度像素比率需要特定尺寸的任何东西都按预期工作,子元素的基于百分比的CSS适当调整.但....

问题

通过单击并拖动(增量重新调整大小)来重新调整浏览器窗口大小时,页面上的所有内容都会完美地重新调整大小.但是,当窗口大小急剧变化,即时,全屏(最大化)变为小(恢复向下),反之亦然,顶部菜单中的字体大小将改变但是父级的CSS li将无法调整以适应新的font-size除非我取消检查(删除)它的padding属性并重新检查它(将其重新添加).当我这样做,它工作正常.该li容器真的只是有一个padding:1%,因此,正常调整是正确的基础上,内部跨度的大小与字体重新大小改变大小.

父级li应自动调整为内部span字体大小的更改.我对此持肯定态度,因为li当我在检查器中动态修改菜单的字体大小或文本长度时,父容器将自动重新调整大小.

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

以下是使用Maximize从小窗口大小到全屏幕时的样子:

我(hacky)修复

只有这样我才能使用它来移除<li>重新调整大小函数顶部元素的填充,然后在重新调整字体大小的行之后重新应用它的重新调整大小函数的底部.但是,这种情况占50%的时间.只有当在重新调整大小函数的底部放置100ms超时以重新应用填充时,我才能让它在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 …