Div 使用不同的浏览器答案

【问题标题】：Div are with different browserDiv 使用不同的浏览器
【发布时间】：2012-10-23 23:10:29
【问题描述】：

大家好，我的 div 区域高度在以下浏览器中显示不同：Firefox 和 Internet Explorer。在 Chrome 和 Safari 中，我的 div 区域看起来不错，请您帮帮我。

这是我的 div 区域

.openmeclis 
{
    position:relative; 
    margin-left:4px;
    background:#66B3E3; 
    width:90px; 
    height:370px; 
    display:inline-block;
    overflow:hidden;    
}

这是我的意思这是来自 Firefox

这是来自 Chrome

<div id="subMenu">
    <div class="openbaskan" style="float:left">
        <a href="/Home/Baskan/45">Başkandan</a> <br />
        <a href="/Home/Baskan/46">&#214;zge&#231;mişi</a> <br />
        <a href="/Home/Baskan/47">Haberler</a> <br />
        <a href="/Home/Baskan/58">Videolar</a> <br />
        <a href="/Home/Baskan_foto">Fotoğraf Galerisi</a>
    </div>

    <div class="openmeclis" style="float:left">
    <a href="/Home/Sehir_Rehberi/93">Meclis &#220;yeleri</a> <br />
    <a href="/Home/Sehir_Rehberi/99">Meclis G&#252;ndemi</a> <br />
    <a href="/Home/Sehir_Rehberi/100">Meclis Kararları</a> <br />
    </div> 
</div>

CSS：

#subMenu
{        
    width:964px;
    margin-left:auto;
    margin-right:auto;
    display:none;
    font-size:14px;
    font-style:normal;
    height:336px;  
    font-family: 'Museo300Regular';         
}

【问题讨论】：

请也添加html。您是否使用任何形式的 css 重置，例如 eric meyers 重置或规范化？
因为我不知道你不喜欢哪一个，我不知道你想改变什么？你能告诉我们你到底想解决什么关于 Firefox div 的问题吗？是额外的水平空间吗？
尝试添加 padding: 0; 和 margin: 0; 以查看您的 CSS 是否具有随机填充/边距。
也给你的 html 东西......所以我们可以用小提琴或其他东西提供答案......
是的，额外的水平空间，你能看到 Firefox 图像，在“Meclis”菜单下，蓝色区域比 Chrome 大

标签： html css

【解决方案1】：

只需在您的 css 中使用 line-height。因为每个浏览器呈现不同的行高，这就是为什么你的 div 在不同的浏览器上显示问题的原因。这是您提出的相同问题的链接

FireFox 3 line-height

CSS line-height issue across browsers

【讨论】：

【解决方案2】：

检查这个编辑过的答案

Edited Demo

Note the edited CSS below:

.openmeclis 
{
    position:relative; 
    margin-left:4px;
    background:#66B3E3;
    width:90px; 
    height:370px; 
    overflow:hidden;
    float: left;
    list-style: none;
}

#subMenu {
    width:964px;
    margin-left:auto;
    margin-right:auto;
    font-size:14px;
    font-style:normal;
    height:336px;
}

HTML:
----------
<div id="subMenu">
    <div class="openmeclis">
        <ul>
            <li><a href="/Home/Baskan/45">Başkandan</a></li>
            <li><a href="/Home/Baskan/45">&#214;zge&#231;mişi</a></li>
            <li><a href="/Home/Baskan/45">Haberler</a></li>
            <li><a href="/Home/Baskan/45">Videolar</a></li>
            <li><a href="/Home/Baskan/45">Fotoğraf Galerisi</a></li>
        </ul>
    </div>

    <div class="openmeclis">
        <ul>
            <li><a href="/Home/Sehir_Rehberi/93">Meclis &#220;yeleri</a></li>
            <li><a href="/Home/Sehir_Rehberi/99">Meclis G&#252;ndemi</a></li>
            <li><a href="/Home/Sehir_Rehberi/100">Gündemi</a></li>
            <li><a href="/Home/Baskan/45">Meclis Kararları</a></li>
        </ul>
    </div> 
</div>

不要添加不必要的<br/> 标签。取而代之的是，您可以使用 <ul> 方法。当您拥有 CSS 时，您不需要在 html 中添加样式标签。我不知道你在#sub menu 中添加了什么...我刚刚为openmeclis 编辑了 HTML 和 CSS

【讨论】：