IE問題有問題 - CSS

我借用了Css Globe的簡易滑動條，但是我修改了它在頁面上的佈局。IE問題有問題 - CSS

/* numeric controls */ 



ol#controls{ 
    margin:0.2em 1em; 
    padding:0; 
    height:16px; 
    float:right; 
    font-size:x-small; 
    font-family: Arial, Verdana, Default; 
    font-weight:normal; 
} 

ol#controls li{ 

    padding:0; 
    float:left; 
    list-style:none; 
    height:16px; 
    width:20px; 
    background:yellow; 
    margin:10px; 
} 

ol#controls li a{ 
    height:16px; 
    line-height:18px; 
    border:1px solid #ccc; 
    background:#FFFFFF; 
    color:#555; 
    padding:0 5px; 
    text-decoration:none; 
    float:right; 
} 

ol#controls li.current a{ 
    background:#736357; 
    color:#fff; 
} 
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

我無法弄清楚 - IE7/8幻燈片NAVI（1,2,3,4）被廣爲傳播時，他們應該被安排在靠近以對方。看他們廣泛傳播的例子。 enter image description here

任何想法爲什麼它行爲怪異？謝謝！

來源

2011-01-27 joe

可以提供樣品鏈接正確地理解你的問題 – 2011-01-27 03:23:35

保證金和填充IE中的CSS屬性。 IE計算的保證金比指定高一倍。 http://article-stack.com/education/web-design-n-development/blog-blogger-blogging/css-ie-margin-fix.amty – 2011-01-27 04:18:21

在IE8中測試。

你有這樣的：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

這使得IE8的行爲，如果是IE7的 - 這是不是很大，但它不是問題。

你有這樣的CSS文件被列入只有如果是IE7（它「是」，因爲以上）：

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

在〜線hpie7.css 75，你有這樣的：

ol#controls li{ 
    margin:10px 100px 0 0; 
    padding:0; 
    float:left; 
    list-style:none; 
    height:16px; 
    line-height:18px; 
}

如果您刪除margin行，則這些數字將會再次靠近，而不是100px。

看起來你必須（在同一個文件，所以它只是IE7）的寬度增加了<ol>這樣的：

ol#controls{ 
    .. 
    width: 100px 
}

來源

2011-01-27 03:44:02 thirtydot

IE問題有問題 - CSS

回答

相關問題