- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
要查看问题页面的实时 View ,请访问此处:http://rcnhca.org.uk/sites/first_steps/health-safety-and-security/
问题 1: 如果您转到该链接并滚动下拉导航,它是子项,您会注意到我在 上的每个
。然而,当你第一次在 IE8 中滚动它时,它会从 li
上设置了一个星形背景图像动画鼠标输入li
的中间开始动画,即使我指定了 background-position: -25px 50%;
,奇怪的是一旦 jquery 内联应用相同的设置,它就会开始按预期工作。
问题 2: 如下图所示,IE8 (这在 IE7 中正常工作) 错误地呈现了我的填充。我已经使用 * {margin: 0; 重置了所有边距和填充填充:0;
在core.css :
这个导航栏的 HTML 标记是:
<header class="one">
<nav class="container_16 clearfix" id="breadcrumbs">
<a href="http://rcnhca.org.uk/sites/first_steps" id="home"></a>
<ul id="parent">
<li>
<a href="http://rcnhca.org.uk/sites/first_steps/communication/">Communication</a>
<ul class="child">
<li><a href="http://rcnhca.org.uk/sites/first_steps/getting-started/">Getting started</a></li>
<li><a href="http://rcnhca.org.uk/sites/first_steps/health-safety-and-security/">Health, Safety and Security</a></li>
<li><a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/">Personal and people development </a></li>
<li><a href="http://rcnhca.org.uk/sites/first_steps/quality/">Quality</a></li>
<li><a href="http://rcnhca.org.uk/sites/first_steps/equality-diversity-and-rights/">Equality, diversity and rights </a></li>
<li><a href="http://rcnhca.org.uk/sites/first_steps/clinical-skills/">Clinical skills</a></li>
<li><a href="http://rcnhca.org.uk/sites/first_steps/additional-material/">Additional material</a></li>
</ul>
</li>
<li>
<a href="#">Select a topic</a>
<ul class="child">
<li><a href="http://rcnhca.org.uk/sites/first_steps/communication/why-communication-is-important/">Why communication is important</a></li>
<li><a href="http://rcnhca.org.uk/sites/first_steps/communication/communication-methods/">Communication methods</a></li>
<li><a href="http://rcnhca.org.uk/sites/first_steps/communication/written-communication/">Barriers to communication</a></li>
</ul>
</li>
</ul>
</nav>
</header>
以及要启动的 CSS:
header {
width: 100%;
}
header.one {
height: 50px;
background: #44a9c4;
}
header.two {
height: 45px;
background: #3393b5;
}
/* =============================================================================
Breadcrumb navigation
========================================================================== */
#breadcrumbs {
padding: 0 3px 3px 0;
background: #ffffff;
border: 0px solid;
border-left: #3a90a7 2px solid;
border-right: #3a90a7 2px solid;
border-bottom: #3a90a7 2px solid;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#breadcrumbs #home{
display: block;
height: 39px;
width: 55px;
float: left;
background-image: url(library/images/home_icon.png);
background-repeat: no-repeat;
background-position: center;
text-indent: -999em;
}
#breadcrumbs ul#parent {
height: 39px;
width: 905px;
float: right;
position: relative;
background: #f38630;
border: 0px solid;
-webkit-box-shadow: inset 0px -2px 0px 0px #cf7229;
-moz-box-shadow: inset 0px -2px 0px 0px #cf7229;
box-shadow: inset 0px -2px 0px 0px #cf7229;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#breadcrumbs ul#parent li {
position: relative;
height: 39px;
float: left;
min-width: 1px; /* required to fix Opera bug */
padding: 0 47px 0 15px;
background-image: url(library/images/breadcrumb_seperator.png);
background-repeat: no-repeat;
background-position: right;
line-height: 39px;
}
#breadcrumbs ul#parent li a {
display: block;
height: 42px;
font-size: 0.938em;
font-weight:900;
letter-spacing: 0.01em;
color: #ffffff;
text-decoration: none;
text-shadow: 0px 2px 0px #cf7229;
}
#breadcrumbs ul li a:visited {
color: #ffffff;
}
#breadcrumbs ul#parent li:first-child ul {
left: -5px;
}
#breadcrumbs ul#parent li ul {
position: absolute;
z-index: 1;
left: -28px;
top: 42px;
background: #ffffff;
border-left: #3a90a7 2px solid;
border-right: #3a90a7 2px solid;
border-bottom: #3a90a7 2px solid;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.js #breadcrumbs ul#parent li ul {
display:none;
}
.no-js #breadcrumbs ul#parent li ul {
left: -999em;
}
#breadcrumbs ul#parent li ul li {
float: none;
height: 26px;
margin: 0 3px 3px 3px;
padding: 0 15px;
background-image: url(library/images/star-icon.png);
background-position: -25px center;
background-repeat: no-repeat;
background-color: #738793;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
line-height: 26px;
white-space: nowrap;
}
#breadcrumbs ul#parent li ul li a{
color: #ffffff;
text-decoration: none;
text-shadow: none;
letter-spacing: 0.01em;
font-weight: 100;
}
#breadcrumbs ul#parent li ul li:hover{
background-color: #3393b5;
}
.no-js #breadcrumbs ul#parent li ul li:hover{
background-position: 6px center;
text-indent: 10px;
}
#breadcrumbs ul#parent li:hover ul {
z-index: 2;
}
.no-js #breadcrumbs ul#parent li:hover ul {
left: -5px;
}
我花了很长时间试图调试这个问题,但无法弄清楚为什么会这样,如果有人能对这个问题有所了解那就太好了。 (注意:我使用 HTML5SHIV 在旧版浏览器中呈现 HTML5 元素)
最佳答案
我不知道这个错误是什么或者为什么 IE8 会这样,但我设法通过从 #home
和 ul# 中删除 float 来解决边距问题parent
并相对于 #breadcrumbs
绝对定位它们并为其指定一个明确的高度,如下所示:
#breadcrumbs {
height: 39px;
padding: 0 3px 3px 0;
background: #ffffff;
position: relative;
border: 0px solid;
border-left: #3a90a7 2px solid;
border-right: #3a90a7 2px solid;
border-bottom: #3a90a7 2px solid;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#breadcrumbs #home{
display: block;
position: absolute;
top: 0px;
left: 0px;
height: 39px;
width: 55px;
float: left;
background-image: url(library/images/home_icon.png);
background-repeat: no-repeat;
background-position: center;
text-indent: -999em;
}
#breadcrumbs ul#parent {
height: 39px;
width: 885px;
position: absolute;
right: 3px;
top: 0px;
background: #f38630;
margin: 0px;
-webkit-box-shadow: inset 0px -2px 0px 0px #cf7229;
-moz-box-shadow: inset 0px -2px 0px 0px #cf7229;
box-shadow: inset 0px -2px 0px 0px #cf7229;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
对于背景图片的问题,我制作了一个 jquery 函数,在元素加载后将背景位置添加到内联元素中。
关于css - HTML/CSS : IE8 padding/background-position problems,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10172995/
我很绝望,现在已经两天(!!)天都没有解决方案来解决以下问题。 更新 Lion 后,我想使用最新版本的 rvm 安装额外的 rubies。 这是我之后调用 bundler 时发生的情况: /Users
我的问题: ajax 调用的无限循环会产生问题吗? 假设有这样的代码: ajaxcall(); function ajaxcall(){ jQuery.ajax({ typ
这是一个有趣的小项目,我已经开始尝试并最大限度地提高赢得办公室曲棍球池的机会。我试图找到最好的方法来选择 20 名能够在最高工资帽内给我最多分数的球员。 例如,假设原始数据由 玩家姓名 位置(前锋,后
我有一个总数为540000的数字列表。我想将此列表分为3个列表,每个列表总共180000。最有效的编程方法是这样做,假设数字列表是一个平面文件,每个数字为线? 最佳答案 听起来像Knapsack pr
抱歉,也许因为我不是英语,我不知道,但我找不到解决几个问题的任何资源;也许我用的词不正确.. 我想了解有关 iPhone 4 和 5 不同分辨率的更多信息。 首先:如果我开发针对 iPhone 4 分
在全局配置缓存后,如 docs ,如果我在 app.module 之外使用 CacheInterceptor,它会抛出错误。 app.module.ts const cacheConfig = {
我无法让 g:each 工作。我正在尝试遍历任何内容,但它永远不起作用 = 不生成任何 html。 索引.gsp Item ${i.name} 用户 Controller .g
在我的 XAML 文件中,我有一个这样声明的 ListBox:
想知道你是否可以帮助我: 我有一个名为initializeAll的方法: public final void initializeAll() { //other stuff........ rand
我尝试过使用 XML 和 JAVA 在我的 Android Activity 中创建一个 ImageView。这两次,我都能够获取我一天前创建的所有其他 PNG 资源以显示在 ImageView 中。
我需要你的帮助。这是什么意思? Warning: mysql_query() [function.mysql-query]: Access denied for user 'ODBC'
这是一段代码 function test() { this.value = "foo"; } $(document).ready(function () { test();
这是一些非常基础的东西。渲染期间引发异常:java.util.Locale.toLanguageTag()Ljava/lang/String; XML: 问题似乎出在 Edit
除其他来源外,我还使用 Stackoverflow 上的各种帖子,尝试实现我自己的 PHP 分类器,以将推文分类为正面、中性和负面类别。在编码之前,我需要弄清楚流程。我的思路和例子如下:
在过去的几周里,每当我在 Eclipse 上使用 SVN 插件时,我都会收到以下错误: Certificate Problem There is a problem with the site's s
我被拒绝运行以下功能(位于 /var/www/mysite/public_html/app/Controllers/Script.php) $structure = '/var/www/mysite/
我正在使用 ctags 为我的 Emacs 创建标签以使用 cygwin 从中读取符号。 Emacs 说 “访问标签表缓冲区:文件/home/superman/tags 不是有效的标签表” 这是我查找
我知道作为一种函数式语言,XSL 没有像传统的 for 循环(而是 for-each)那样的东西。 我正在尝试从可变数量的元素开始创建一个具有固定数量 (7) 的表。总之,我有
我正在使用RavenDB进行一些测试,以基于iphone应用程序存储数据。该应用程序将发送一个带有GPS key 的5个GPS坐标的字符串。我在RavenDB中看到每个文档约为664-668字节。这是
我无法理解我的应用程序的行为。我想创建一个简单的窗口 (1000x700px),分为两部分(分别为 250px 和 750px 宽度)。我尝试了以下代码: import java.awt.Color;
我是一名优秀的程序员,十分优秀!