2

http://11bouchardg.decmultimedia.ca/myriam_coiffure

问题与上面链接的网站有关。

http://pastebin.com/HyyB9vhL

这是无法按预期工作的代码部分。请看评论。在它们之上是有问题的线条。

我在注释中指出的代码打算用它的当前值(以像素为单位)替换两个元素的高度/宽度值,即“auto”,这样我以后可以做一个 CSS3 过渡——你可能知道,过渡属性无法使用“auto”值。

基本上,我用这个恢复计算值:

someVariable=window.getComputedStyle(<"my element">).getPropertyValue('<"width or height">');

然后我将它应用到元素上:

<"my element">.style.<"width or height">=someVariable;

高度完美。然而,宽度使宽度为 0... 这确实使 CSS3 过渡工作,但也将剪刀向左移动。您可以通过在页面上打开一个部分并再次关闭它来了解这是一个问题。(您可以通过单击标题打开或关闭部分。)

请注意,获取计算值不是问题所在。正如您在消息开头的 pastebin 链接中看到的那样,输出它们console.log()会给出预期值。

这是我正在开发的网站,而不是仅用于该网站的存档副本。因此,在接受答案后访问它会(希望!)引导您进入一个没有问题的页面。或 404 未找到错误,具体取决于您尝试访问它的时间。


编辑

好的,所以,由于问题不是很清楚,我创建了两个 Fiddles 尽可能地隔离问题。和一张解释图。

1——有内容。将允许您查看如何根据存储的值正确设置内容的高度。(是的,如果您重新打开该部分,内容不会重新出现。不想研究这个问题,因为它与这里无关。当我最小化代码量时一定删除了一些重要的行。是的,它是丑陋,因为我没有费心研究比例或任何东西。)

http://jsfiddle.net/ubCB3/1/

2——没有内容。这是为了让您只看到与手头问题直接相关的内容。是的,它更难看,因为我也尽量减少了 CSS 的数量。过渡被大大延长了,所以你可以很好地看到发生了什么。

http://jsfiddle.net/ubCB3/3/

以及解说图。(此处为全尺寸,用于阅读小文本)。您也可以使用 Ctrl-+ 进行放大。 解释图在这里。

4

1 回答 1

0

您应该max-width : 0用于关闭剪刀和max-width:1000px;打开状态。通过这样做,您可以覆盖width:auto过渡中的问题。

于 2013-05-12T13:51:36.207 回答