CSS中的条件代码区分浏览器

Question

<form:form...>
<DIV class="outer-left-bm">Location:&nbsp;</DIV><DIV class="outer-right-bm"><form:select path="location" items="${locationList}" itemValue="code" itemLabel="desc" /></DIV>
<DIV class="outer-left-bm">Name:&nbsp;</DIV><DIV class="outer-right-bm"><form:input path="Name" maxlength="20" size="20" /></DIV>
</form:form>

DIV.outer-left-bm {
    width:49%;
    display: inline-block;
    min-height: 0;
    border: 1px;
    text-align: right;
    margin-bottom: 8px;
}
DIV.outer-right-bm {
    width: 50%;
    display: inline-block;
        min-height: 0;
    border: 1px;
    text-align: left;
    margin-bottom: 8px;
}

我有一个像CSS文件中定义的属性，并在HTML / jsp中使用。 在这里，我想基于用户浏览器将display属性用作内联或内联块。 如果IE（5-7）＆＃39;显示：内联;＆＃39;否则＆＃39;显示：内联块;＆＃39; 我想在css中执行条件代码而不是在html中控制它们。

Answer 1

也许您可以在HTML中使用条件逻辑来包含特定于浏览器的CSS文件。

示例：

    <!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" href="/my/style/sheet/style.css">
    <![endif]-->

不幸的是，标准CSS3中的浏览器没有条件逻辑。

您还可以结帐html5shiv和Modernisr以帮助处理旧浏览器/ IE

Answer 2

相关呈现引擎提供的供应商前缀属性（适用于Chrome，Safari的=;适用于Firefox的-webkit，适用于Opera的-moz，适用于Internet Explorer的-o用于在W3最终澄清/定义之前实现新的或专有的CSS功能。

这允许为每个浏览器/渲染引擎设置特定于浏览器的属性，以便安全地考虑实现之间的不一致。

以下是参考资料：

1）WebKit extensions

2）Mozilla CSS Extensions

Answer 3

您可以在特定的CSS文件中使用条件逻辑。

仅限目标IE 5

SELECT t1.field1,
       t1.field2,
       t1.field3,
       t2.name,
       t2.pathway
FROM table1 t1
INNER JOIN table2 t2
    ON t1.field1 = t2.field1

仅限目标IE 6

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

仅限目标IE 7

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

详情：您可以看到此网址https://css-tricks.com/how-to-create-an-ie-only-stylesheet/