元素与CSS显示:无;打破布局 – 造成不及格

前端之家收集整理的这篇文章主要介绍了元素与CSS显示:无;打破布局 – 造成不及格前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个基本菜单,由水平对齐的列表(< li>)制成,每个列表包含图标图像和一些文本:

< li>中的一个包含一个额外的图像与显示:无;使图标可以被切换(从绿色到红辣椒,在这个例子中.
问题是它在一些浏览器上没有正确对齐,如上图所示.我的理解是,与可见性相反:隐藏;一个显示:none的元素;不应该影响任何其他元素的位置,并且应该不会像现在那样

不能正确呈现的浏览器是Google Chrome和Safari,但仅适用于Windows上的MacOS(!?)和IE7(我知道,我知道…).我测试的其他浏览器/操作系统组合都可以正常工作.

这是HTML:

<ul class="menu">
    <li><img alt="Green Pepper" src="/green.png">li</li>
    <li><img alt="Green Pepper" src="/green.png">li</li>
    <li><img alt="Green Pepper" src="/green.png">li</li>
    <li id="change">
        <img alt="Red Pepper" src="/red.png" style="display: none;">
        <img alt="Green Pepper" src="/green.png"> 
        li
    </li>
    <li><img alt="Green Pepper" src="/green.png">li</li>
</ul>

这是CSS:

.menu li {
    cursor: default;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 10pt;
    list-style-type: none; 
    position: relative; 
    text-align:center; 
    margin: 0 0 0 -25px; 
    padding: 8px 0 0 0;
    width: 144px;
    height: 35px;
    display: inline-block;
    background-image: url(../bct-white.png);
    background-repeat: no-repeat;
    color: #0091c1;
}

而对于图标图像:

.menu img {
    display: inline;
    vertical-align: -25%;
    padding-right: 6px;
}

我也不得不为IE7添加浏览器,因为它不能识别来自基于条件导入(<! - [if lte IE 7]>)的单独样式表的内联块):

.menu li {
    zoom: 1;
    display: inline;
}

尽管很明显,无论操作系统如何,Chrome和Safari都无法加载样式,因此无法在Mac上导致我的问题.

我知道最快的解决方案是重构HTML和JavaScript对图标的显示/隐藏的操纵,但我真的很想知道导致此问题的原因以及如何解决它.

更新

我跟踪原因.基本上,显示的元素样式:none;在< img>元素从.menu img规则覆盖内联.删除它,然后在块和内联之间切换允许您重现问题.这显然是一个浏览器错误,而元素不是显示为一个in-line或block元素应该不会影响布局.

jsFiddles

Issue with Chrome and Safari on Macs only

Issue with extra CSS for IE7 only

注意!对我来说,Fiddle页面没有正确地使用IE7加载,但结果iFrame的直接链接http://fiddle.jshell.net/z4dU7/3/show/

赏金更新!!!

我在下面发布了一个修复,但它实际上在IE9中引入了相同的布局问题!请随意对我的答案进行改进或改进 – 或者与完全不同的东西来到桌子上:)

解决方法

废弃方法和使用背景图像

http://jsfiddle.net/P5CKC/2/

<ul class="menu">
    <li><span>Li</span></li>
    <li><span>Li</span></li>
    <li><span>Li</span></li>
    <li class="change"><span>Li</span></li>
    <li><span>Li</span></li>
</ul>

CSS

ul.menu {
    overlflow: hidden;
}
ul.menu li {
    float: left;
    font-family: Verdana,sans-serif;
    font-size: 10pt;
    text-align:center; 
    margin: 0 0 0 -25px; 
    width: 152px;
    line-height: 35px;
    height: 35px;
    background: url(../bct-white.png) no-repeat;
    color: #0091c1;
}
ul.menu li span {
    background: url(/green.png) no-repeat 5px 6px;
    display: block;
}
ul.menu li.change span {
    background-image: url(/red.png);
}

CSS2.0和浏览器兼容

我提供的代码应用程序是Css2.0,应该能够在IE7及以上版本中工作.

删除img标签和实现美学(图像)作为背景
>额外的跨度必须添加,因为CSS2每个元素只允许1个背景图像
李标保持箭头背景; span标签保留胡椒背景
>将id =“change”更新为class =“change”.除非你确定你只有一个#change元素,使用一个类.这是纯粹的造型,它阻止您在同一页面上有两个菜单列表.
>调整你的CSS样式一点如下:

去除顶部填充并增加高度.所以你的li元素是相同的高度,然后添加line-height:35px – >这是垂直居中的文本的最佳方式.使用顶部填充工作,但它很容易导致浏览器不一致.

将li元素更改为浮点数.漂浮元素是最IE7友好的方法!即使IE6也不会出错,但是我没有旧版本来测试您的网页.FYI – ul.menu必须有溢出:隐藏以清除浮动.

position: relative; 
cursor: default;

除非您更改了默认值,否则可以保留这两个属性.光标应为默认值.位置:亲戚是不必要的 – 你没有使用绝对定位或任何需要保证的东西.现在,您可以将这些保留在您的声明中.我只是喜欢代码尽可能“苗条”.

最后的话:

看看我的CSS.注意我在所有声明中如何使用ul.menu.你可能想要做同样的习惯;这为开发人员提供了一些关于HTML看起来更加重要的洞察力 – 如果您决定添加< div class = menu>,则CSS将不会被覆盖.稍后的.特别的.menu img将适用于菜单div中的任何图像标签.

好吧 – 就是这样让我知道如果有任何澄清.

FYI – 看到这个问题有一个赏金,如果你提供我的背景图像,我可以抛光我的代码,以满足您的需求100% – 也许上传他们在您的答案的编辑.

原文链接:https://www.f2er.com/css/217021.html

猜你在找的CSS相关文章