【问题标题】:Conditional style inside an html taghtml标签内的条件样式
【发布时间】:2012-12-20 20:01:18
【问题描述】:

是否可以在标签内使用条件样式,如下所示?

<body>
    <div id="InScreenAlertContainer"
    <!--[if IE]>
    <style>width=100%</style>
    <![endif]-->
    >
    ...
    </div>
...
</body>

【问题讨论】:

  • 您应该只使用条件来包含样式或其他脚本。我不相信你可以这样使用它。如果你好奇的话,你应该使用 IE 来测试它。
  • “没有比好奇心更重要的老师了” - 如果你想知道就试试吧。

标签: html css jsp tags styles


【解决方案1】:

根据使用的浏览器使用条件样式表

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->

来源: http://www.thesitewizard.com/css/excludecss.shtml

JQuery .css 方法可让您指定在事件发生后生效的样式

//On Button Click - applies a style on click.
$('#change').click(function()
{
    $('body').css('background-color',$('#color').val()); 
});

来源: Change CSS rule at runtime

【讨论】:

  • 我只想覆盖 IE 的宽度属性。所以我不想使用两个不同的样式表来改变一个属性。
【解决方案2】:

你可以试试这个:

  #div{
        padding: 10px; /* standard */
        padding: 17px\9; /* IE 8 and below */
        *padding: 15px\9; /* IE 7 and below */
        _padding: 16px\9; /* IE 6 */
    }

<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>

<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->

<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->

<!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->
<![if false]>You are using a <em>downlevel</em> browser.<![endif]>

<!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->

参考:

reference link 1

reference link 2

refernce link microsoft

【讨论】:

    【解决方案3】:

    也许你可以尝试这样的事情,但我还没有测试过。

     <!--[if IE 6]>
        <style>
           .mywidht{
               width:100px;
            }
        </style>
        <![endif]-->
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2010-10-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-11-19
      相关资源
      最近更新 更多