将“auto”宽度设置为计算值为0，但高度有效

Question

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

问题涉及上面链接的网站。

http://pastebin.com/HyyB9vhL

这是代码中不能按预期工作的部分。请看评论。在他们之上是有问题的线。

我用注释指出的代码打算用像素的当前值替换两个元素的高度/宽度值，即“auto”，所以我可以稍后进行CSS3过渡 - 你可能知道，过渡property无法使用值“auto”。

基本上，我用这个恢复计算值：

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

然后我将它应用于元素：

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

高度完美无缺。然而，宽度使宽度为0 ...... 使CSS3过渡工作，但也将剪刀向左移动。您可以通过打开一个部分并在页面上再次关闭它来查看这是一个问题。 （通过单击标题打开或关闭部分。）

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

  

这是我正在处理的网站，而不是仅用于存档的副本   网站。因此，在接受答案后访问它将会   （希望如此！）引导您进入无问题页面。或者找不到404   错误，具体取决于您何时尝试访问它。

---

修改

好的，所以，既然问题不是很清楚，我已经创建了两个小提琴，尽可能地隔离问题。并附有说明。

1 - 包含内容。将允许您根据存储的值查看内容的高度是如何正确设置的。 （是的，如果你重新打开这个部分，内容就不会重新出现。不要因为它在这里没有关系而考虑这个问题。当我最小化代码量时，必须删除一些重要的行。是的，它是丑陋，因为我没有费心去处理比例或任何事情。）

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

2 - 没有内容。这个是你只看到与手头问题直接相关的东西。是的，它甚至更加丑陋，因为我也减少了CSS的数量。过渡期大大延长，所以你可以看到真正发生的事情。

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

和说明图。 （Full size here, for reading the small text）。您也可以使用Ctrl- +放大。

Answer 1

您应该使用max-width : 0来关闭剪刀，并使用max-width:1000px;来打开状态。通过执行此操作，您可以覆盖width:auto，这是转换中的问题。