javascript - CSS - 如何做 : "ONE-TIME CSS EXPRESSION" in css?(例如 IE 的最大高度/最大宽度)

Question

我通常在幻想在 SO 中提出问题之前解决我的编程疑惑，但这是我第一次似乎无法找到答案......所以......这里是我的第一个问题经过数小时的尝试解决此问题后的网站:

¿如何拥有一次性的 css 表达式？

---

为什么一次性表达？: 如果我们做一些测试(小心，因为 IE6 和 IE7 会一次又一次地显示警报...):

<div style="height:expression(alert('this alert repeats itself'));">
  content with infinite alert...
</div>

表达式会一直计算到时间结束...这就是为什么我想了解一种方法让它只发生一次，就像 2° 文章试图解释的那样覆盖样式本身，但我不能'它真的无法正常工作....

---

正如我们在这篇文章中所读到的:

http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_6/

表达式重复自己，这可能是一个性能问题......

然后这篇文章:

http://vacskamati.blogspot.com/2008/10/one-time-execution-of-ie-css.html

这很好，因为它是我发现的唯一一个试图解决这个问题的方法......但我似乎无法解决问题......

我正在尝试做的...是在 IE 中模拟“最大宽度”和“最大高度”...我知道 FF 和其他所有东西都可以直接用 CSS 完成..我必须让它在 IE6 和 IE7 中以某种方式工作...

我知道我可以在外部使用 JS，但正如您将在我的代码中看到的那样...我将尝试放置 php 值...所以我需要直接在表达式中进行一些控制，以便它自动执行有时我不必在其他地方编写 JS 函数......我认为这应该非常简单......但我可以得到它......无论如何......我的代码就是这样...... :

<div id="div_id" 
     style="
            max-height:<?php echo $height_var; ?>;
            -$height: 
                expression( 
                           if(document.getElementById('div_id').offsetHeight><?php echo $height_var; ?>){ 
                            document.getElementById('div_id').style.height = '400px'
                           }

                          );
            overflow:scroll;
            " >
  content--lbalbalbalbalblablablalb
</div>

Sooo...嗯，这是基本的想法...我已经尝试过以上文章试图解释的不同方式，我已经尝试过给那个人发邮件，嗯，但是在我等待可能的答案时，我将这个问题暴露给 SO 社区，因为无法为我认为可能很简单的事情找到答案是非常奇怪的......

所以现在......据我所知，EXPRESSION 会重复自己......如果原始内容大于 400px，我会得到 SCROLL......但我知道它会重复自己，因为......如果我发送一个“警报()”它一直出现......所以......再次我如何实现一次表达......所以 IE 不会评估它 mousemove 或任何 Action ......

提前致谢 =)(对我奇怪的缩进代码感到抱歉...=P)

Answer 1

我不太清楚你想要什么，但我希望这会有所帮助:

模拟最大宽度:

* html div#division 
{ 
   width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); /* sets max-width for IE */
}
div#division 
{ 
   max-width: 777px; /* this sets the max-width value for all standards-compliant browsers */
}

模拟最大高度

* html div#division 
{ 
   height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */
}
div#division 
{
   max-height: 333px; /* sets max-height value for all standards-compliant browsers */
}

http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/

请注意，不再支持一次性 css 表达式。 http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx