我见过许多开发人员在我使用100%的地方编写HTML或CSS内联样式宽度为99.9%.使用99.9%是否有正当理由？它与100%有任何有效差异吗？
编辑转发MSalters的非常好的问题:Considering that 99.9% is one pixel off above 500 pixels, why not 99.99%? 我猜他是对的,如果你跟你一起使用dirty hack你应该使用99.99%,有人不同意吗？
其他参考文献:
zoom:http://www.bennadel.com/blog/1354-The-Power-Of-ZOOM-Fixing-CSS-Issues-In- Internet-Explorer.htm.Html结构
<a>
<span> <!-- Span has width & height -->
<img>
</span>
<span> Some text <span>
</a>
锚无法点击只在IE7中,我知道这个问题是因为hasLayout的,如果我们删除高度和跨度的宽度,它会正常工作.
但是我需要让它去除高度和宽度.
编辑:你可以在这里找到一个例子:http://jsfiddle.net/rxcAb
每当我发现IE显示我的网站很奇怪(不同于chrome和firefox),我尝试zoom:1在css类中为显示奇怪的部分添加一个.很多时候,这可以解决问题并使其与其他浏览器保持一致.
这是一个问题zoom:1吗？我知道我的CSS不会验证,但如果我过分依赖使用,zoom:1是否会出现任何现实问题？
所以这个问题一次又一次被问到,但我注意到了一些不同的东西; 见下文.
<ul>元素上设置hasLayout时子弹消失,而不是<li>; 这通常在做*{zoom:1}时完成backgroundAttachment "scroll"
backgroundColor "transparent"
backgroundImage "none"
backgroundRepeat "repeat"
borderBottomColor "#000000"
borderBottomStyle "none"
borderBottomWidth "medium"
borderCollapse "separate"
borderColor "#000000"
borderLeftColor "#000000"
borderLeftStyle "none"
borderLeftWidth "medium"
borderRightColor "#000000"
borderRightStyle "none"
borderRightWidth "medium"
borderStyle "none"
borderTopColor "#000000"
borderTopStyle "none"
borderTopWidth "medium"
borderWidth "medium"
bottom "auto"
clear "none"
color "#000000"
cursor "move"
direction "ltr"
display "block"
fontFamily "tahoma, arial, helvetica, sans-serif"
fontSize "0.9em"
fontStyle "normal"
fontVariant "normal" …我有一个手风琴类型的东西,有头文字.当它打开时,它有一个填充,当它关闭时,它有另一个.所有面板都以它们的开放样式开始,然后通过JS,它们被关闭.在Chrome和Safari中,标题文字没有应用封闭的填充.
如果我在检查器中查看它,正确(打开)填充显示为已应用,当单击检查器中的实际元素时,我可以看到填充应该在哪里.
我能够应用它或"绘制"它(如果这是正确的术语)的唯一方法是切换(或添加)该标题文本或该面板内的任何样式.
我还发现,当我通过检查器添加填充作为内联样式时,也没有应用,并且切换不会改变它.
看起来这与IE"hasLayout"问题非常相似,但我找不到任何引用类似错误的内容.有没有人有进一步测试的想法或如何解决它？
我似乎无法在一个更简单的jsfiddle中复制这个问题,而我正在研究的项目是巨大的,所以这里有大量的代码给我一个问题:
CSS
@media only screen and (min-width: 600px) and (max-width: 767px) {
.checkout-plans .collapsible .title {
padding-right: 130px;
}
.checkout-plans .collapsible.closed .title {
padding-right: 323px;
}
}
HTML
<div class="module checkout-plans">
<div class="collapsible active">
<header>
<div class="title">
<h3>This text has the correct padding applied</h3>
</div>
</header>
</div>
<div class="collapsible closed">
<header>
<div class="title">
<h3>This text does not have the correct padding after having the "closed" class applied …我在我的网站上使用 IcoMoon 图标，虽然它们在所有现代浏览器中都能完美运行，但在Internet Explorer 7 中根本无法使用，并且在Internet Explorer 8 中显示为小框。除了字体的相对路径外，来自IcoMoon的CSS如下：
@font-face {
font-family: 'icomoon';
src:url ('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/icomoon.woff') format('woff'),
url('../fonts/icomoon.ttf') format('truetype'),
url('../fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-variant:normal;
}
我正在使用 data-icon 属性（例如<li data-icon=""><a href，等）在我的导航中显示图标。
可能是什么问题？
css haslayout font-face internet-explorer-8 internet-explorer-7
我正在一个页面上有一个带有嵌套p,div和li的ol.Internet Explorer 6和7都在末尾的p元素(在li标签的最底部)之后呈现ol标记的数字,而不是在预期的最外层li的顶部.我正在使用PowerPC Mac,无法进行任何测试.是否有一些简单的CSS黑客使这个渲染与在Firefox中相同？
您可以在此处查看实时页面.我知道,我正在努力定位侧边栏.暂时忽略它.
标记如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/whats_included.css" />
<script type="text/javascript" src="script/compliant_target_blank.js"></script>
<!--[if lte IE 5]>
<script type="text/javascript" src="script/ie_5_unsupported_warning.js"></script>
<![endif]-->
<!--[if gt IE 5]>
<link rel="stylesheet" type="text/css" href="css/ie_hacks/global.css" />
<![endif]-->
<title>
The Daily Plan-It, LLC - Home of the Tax MiniMiser
</title>
</head>
<body>
<?php include("includes/nav_bar.php") ?>
<div id="content">
<img src="images/title.png" alt="Tax MiniMiser …像许多在Internet Explorer网站上工作的开发人员一样,我似乎遇到了很多由臭名昭着的hasLayout旗帜引起的错误.
我理解这个标志的作用以及它是如何工作的(大多数情况下).我前几天阅读的一个很好的解释(虽然我找不到源代码)是hasLayout在IE中本质上意味着"使这个元素成为一个矩形".
它显然比那更复杂,但它很好地总结了(在我看来).
我不明白的是浏览器使用此标志的原因.在寻找答案时,我找到了一个听起来合乎逻辑的答案:
在CSS真正全面展开之前,Internet Explorer必须处理非常旧的遗留代码.作为使浏览器易于添加CSS的架构决策,该
hasLayout标志用于触发某些CSS属性,以便正确呈现页面.这可以追溯到IE4时代.
这几乎对我有意义,直到我意识到Firefox(当时的Netscape)必须处理同样的问题.Netscape几乎与Internet Explorer一样长,但hasLayout据我所知,它不需要任何内部标志或类似内容.
看看hasLayout标志是如何在Internet Explorer中出现如此多的错误,有谁知道为什么IE有这个标志而其他浏览器不需要它？
如果有人有任何理论或碰巧知道答案,我想纯粹出于好奇而知道这件事.我想更多地了解为什么(或为什么不)这个标志是有用的.
我有以下内容(http://jsfiddle.net/gVZwr/4/):
<div>
<label>From</label>
<span>Some Content Goes Here</span>
</div>
span {
display: inline-block;
overflow:hidden;
}
在IE8/9中,标签和跨度不对齐(标签低于跨度).
为什么？？？我可以通过贴上overflow:hidden标签来修复它,但我想知道是什么导致它.我尝试了旧的"hasLayout"修复程序,例如zoom:1贴上标签,但似乎没有什么可以修复它,具体而言,overflow.