- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我的问题引用this我一直在开发的网站。看到里面有4个圆圈和4个按钮的地方了吗?这是他们的相关 CSS:
/* STEPS HIGHLIGHT */
.steps {
background: transparent url(img/bg-steps.gif) 37px 92px no-repeat;
clear: both;
float: left;
text-transform: uppercase;
}
.steps .col {
margin-top: 15px;
text-align: center;
}
.col.steps-1 {
width: 194px;
}
.col.steps-2 {
margin-left: 40px;
width: 196px;
}
.col.steps-3 {
margin-left: 21px;
width: 232px;
}
.steps .col.last {
margin-left: 11px;
width: 226px;
}
.steps .col.last h3 {
margin: 0 auto;
width: 129px;
}
.steps h2 {
font: 24px 'ProximaNovaLight';
}
.steps h3 {
color: #7f7f7f;
display: block;
font: 14px 'ProximaNovaSemibold';
height: 20px;
}
.steps p {
font: 9px 'Arial';
}
.steps .col .icon {
margin: 28px 0 40px 0;
position: relative;
left: 43px;
width: 98px;
height: 98px;
}
.steps-1:hover h3,
.steps-2:hover h3,
.steps-3:hover h3,
.steps .col.last:hover h3 {
color: #c03a2f;
}
.steps-1:hover .icon,
.steps-2:hover .icon,
.steps-3:hover .icon,
.steps .col.last:hover .icon {
background: transparent url(img/ico-steps-hover.gif) -6px 3px no-repeat;
}
.steps-2:hover .icon {
background-position: -240px 3px;
}
.steps-3:hover .icon {
background-position: -457px 3px;
}
.steps .col.last:hover .icon {
background-position: -700px 3px
}
如您所见,我为圆圈和 <a>
使用了背景图像元素来构建悬停效果。本来,主播是没有背景的。在悬停时,它们被分配了相同的 Sprite 和不同的背景位置。我使用相对定位和边距来定位 <a>
元素。
我的问题是 Chrome 和 Firefox 之间存在 2px 差异,这会破坏后者的效果。我不知道差异是否出现在背景位置的边缘或背景位置,也不知道为什么存在。
有没有人遇到过这种问题?为什么会这样?我如何解决它?为了找到解决方案,我已经苦苦挣扎了几个小时。
最佳答案
我可以建议一个更好的实现方法吗?您有 2 个大图像,分别为 21.8K 和 23k。圆形背景只需要一张图片。以及 Sprite 中带有红色悬停状态的图标。你不需要水平线的图像,你可以用纯 CSS 来完成。点击下面的链接。它应该是这样的:fiddle
您的 HTML:
<div class="anchorSection">
<div class="circle">
<a href="#" class="wheel"></a>
</div>
<div class="circle">
<a href="#" class="wheel"></a>
</div>
<div class="circle">
<a href="#" class="wheel"></a>
</div>
<div class="circle" style="margin-right:0">
<a href="#" class="wheel"></a>
</div>
<div class="horizontal">
</div>
和你的 CSS:
.anchorSection{
width:838px;
height:102px;
position:relative;
}
.circle{
width:99px;
height:102px;
background:url("circle.gif");
float:left;
margin-right:147px;
z-index:-1;
}
.circle:last-child{
margin-right:0;
}
.circle a{
width:39px;
height:39px;
display:block;
margin:0 auto;
margin-top:29px;
}
.circle a.wheel{
background:url("wheel.gif") 0 0 no-repeat
}
.circle a.wheel:hover{
background-position:-39px 0;
}
.horizontal{
position:absolute;
top:50%;
border-top:1px solid #cfcfcf;
border-bottom:1px solid #ececec;
width:100%;
z-index:1
}
我只为您完成了第一个图标,但重复了 4 次。你显然需要做剩下的 3 个图标和它们各自的悬停状态。确保将所有 8 个图标都放在一个 sprite 中,这样您只加载 1 张图像并使用正确的背景位置来为每个图标及其悬停状态获取正确的图像。希望这会有所帮助。
关于html - Firefox 和 Chrome 之间神秘的 2px 差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11160879/
我正在上 codeschool,他们告诉我: SORRY, TRY AGAIN transform must be defined last, after the browser prefix sty
我正在使用 SCSS 更改 bootstrap 4 的样式以创建我自己的样式,但是当我编译 SCSS 时出现此错误: { "status": 1, "file": "H:/!WEBSITE/m
在将作为 photoshop 文件给出的网页设计转换为 html+css 时,我对字体大小感到困惑。如下图所示,photoshop 中的 30 px 不等于其他 Windows 程序(Mac 或其他程
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 6 年前。 Improve
在我当前的代码中,ul 一直放在页面底部,超过了我的预定义框。 我尝试使用 position:fixed 和 bottom:0 .box { width: 900px; height:
我在 photoshop 中有一个模型,其字体为 60px。我将浏览器中的字体设置为相同的 60px 大小,但浏览器中的字体较小。知道这是为什么吗? 最佳答案 您在 Photoshop 中为您的文本启
我想知道是否有可能仅使用 CSS 获取页面的浏览器/视口(viewport)像素尺寸并将其显示在页面上(最好使用“内容”样式)。我正在为我的一个元素(完全用 CSS 构建)这样做。我知道使用 JS 很
我正在尝试将可变数量的像素计算为与密度无关的像素,反之亦然。 这个公式 (px to dp): dp = (int)(px/(displayMetrics.densityDpi/160)); 不适用于
我在一个带有 1px 边框的容器中有两个 div。我希望每个 div 按宽度正好占据容器的一半,所以我尝试使用 CSS3 的 calc函数从总宽度 (50%) 中减去预定的像素值(2px,div 的每
我正在使用 em 但在嵌套元素中遇到问题所以我决定使用 % 作为 yui建议。 To change the size of a font, always use percentages as the
我有一个元素容器。我想为容纳元素的容器设置最大高度,但如果元素没有填满整个尺寸,则让容器降低其高度。是否可以通过 CSS 实现? 最佳答案 也许使用height: auto。请显示您的 CSS 和 H
我刚刚开始使用 sprites 来减少 HTTP 请求,我在将处理悬停动画的旧脚本转换到新系统时遇到了一些问题。我真的不想为每个按钮设置一个单独的功能,因为这很痛苦,尤其是按钮的数量,即使复制和粘贴也
我正在从头开始创建一个 HTML 页面,并在其中动态放置值,然后将其显示在 WebView 中。 我正在尝试在 WebView(作为 HTML)中复制 ActionBar(出现在应用程序的其他 Act
我希望“蓝色”容器始终为 70 像素高,而之前的“绿色”div 在使用 javascript 调整 div 大小时始终最大化可用高度。 我已经尝试了一段时间,但没有找到合适的解决方案。我们将不胜感激。
我在 Quora 上阅读了以下内容: By setting the font-size of the (which by default its 16px) to 62.5%, setting em
我在关于 http://developer.android.com/guide/practices/screens_support.html 的一些不幸的歧义中迷失了方向,而且我找不到澄清问题的 st
以前做移动端项目的时候都是用rem来做适配,现在基本上都是通过viewport单位来做。 postcss-px-to-viewport就是一个将px单位转换为视口单位的 (vw, vh, vmi
有什么区别: border-right: 1px dotted #CCCCCC; 和: border-right: 1 px dotted #CCCCCC; 有没有? 第二个不正确吗?你需要在 px
我想创建(某种)全 Angular slider ,其中我有一个带有多个子部分的柔性包装器。每个部分100vw排成一排。现在我想每次单击按钮时都将 Flex-wrapper 的 margin-left
在这样的代码中: var a = e.clientX; var b = document.getElementById('someElement').style.left; var z = a - b
我是一名优秀的程序员,十分优秀!