0 
<!--[if lte IE 8]>
.food_disp{
    background: url("../images/food.png") center bottom no-repeat;
    padding: 80px;

}
<![endif]-->
<!--[if !IE]>
.food_disp {
    background: url("../images/food.png") center bottom no-repeat;
    padding: 50px;
}

<![endif]-->

I have tried the above css to display an image as background with padding set as above. I would like to tell the translator/interpreter that if the client browser version is lower or equal to 8 then add a little more padding distance to the image block for display or if this is not IE at all, then use the already defined block. The image display is fine without the conditional clause added that is, only if 

 .food_disp {
        background: url("../images/food.png") center bottom no-repeat;
        padding: 50px;
    }

is used. but if the condition is added, then the image disappears.

4

4 回答 4

1

我建议您使用HTML5Boilerplate执行此操作

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> 

<html class="no-js" lang="en"> <!--<![endif]-->

CSS：

.ie9 .food_disp{
  .......
}
.ie8 .food_disp{
  .......
}
于 2012-09-14T07:38:31.747 回答
1

它不是那样工作的。你有两个选择：

  1. 在 HTML中使用条件注释来包含特定于 IE 的样式表
  2. 应用 CSS hack（不要那样做）。另请参阅Ie8 CSS Hack - 最佳方法？
于 2012-09-14T05:02:20.980 回答
0

如果您想使用内联样式表，请像这样使用它们：

<!--[if lte IE 8]>
<style>
    .food_disp {
        background: url("images/food.png") center bottom no-repeat;
        padding: 50px;
    }
</style>
<![endif]-->

请注意定义周围的“样式”标签。

关于“..”问题，这些点显然指向您的 html 文件的父目录。使用内联 css 时需要记住设置 html 文件的正确相对路径。如果将其用作单独的样式表文件，这可能与 css 文件中使用的路径不同。

于 2012-09-14T07:33:43.413 回答
0

………………………………………………………………………………………………………………………………………………

嗨，现在习惯了这种格式，我认为您的图像路径有问题 

  <!--[if lte IE 8]>
        .food_disp {
            background: url("images/food.png") center bottom no-repeat;
            padding: 50px;
        }
    <![endif]-->



    <!--[if !IE]>
    .food_disp {
        background: url("images/food.png") center bottom no-repeat;
        padding: 50px;
    }

    <![endif]-->

更多信息

于 2012-09-14T04:42:25.163 回答