滑动门CSS，按钮标记和IE8

我正在致力于使用按钮标记而不是常规提交按钮来升级系统的项目。对于按钮的格式化，我有以下CSS类：滑动门CSS，按钮标记和IE8

button::-moz-focus-inner { 
     border: none; /* overrides extra padding in Firefox */ 
    } 

    button { 
     background: transparent url('images/greenrightbutton.png') no-repeat scroll top right; 
     color: #FFFFFF; 
     display: block; 
     font: normal 12px arial, sans-serif; 
     height: 25px; 
     padding-right: 8px; /* sliding doors padding */ 
     padding-top: 0px; 
     padding-bottom: 0px; 
     padding-left: 0px; 
     margin: 0px; 
     text-decoration: none; 
     border: 0px; 
     overflow: visible; 
    } 
    #loginbox button { 
     float: right; 
    } 
    button span { 
     background: transparent url('images/greenleftbutton.png') no-repeat top left; 
     display: block; 
     line-height: 18px; 
     padding: 4px 5px 5px 12px; 
     margin: 0px; 
     border: 0px; 
    }

它们在除IE8以外的每个浏览器都完美地工作。

在IE8中，按钮在大多数地方都可以使用，但是后来我找到了一个页面，其中两个背景图片没有完全对齐，并且没有任何调整填充，行间距等操作来修复它。

有谁知道为什么这可能是这种情况？

演示页：http://test6.placement.co.uk/demo/test.asp

---更新---

后一些相当广泛的测试和尝试新事物，我现在得到的东西是在第1页引起的问题一个非常公平的想法，但不知道如何解决它，而另一个具有相同问题的页面有一个完全不同的原因（我没有找到），但我已经偶然发现修复...

第一页上的问题出现与进入页面的ul进行关联。拿出来，所有的行为 - 不幸的是，这不是一个选项，因为ul是用户输入的内容的一部分，所以我抓住了我的头。尤其是...

Page 2没有可能导致问题，但在我的按钮代码解决问题之前，随机粘贴两个break标签。

当然，该修复页面上不起作用1.

我正要准备放弃并找到使这些按钮的一些替代方法，因为无论实际的问题是，它显然是如此之深在我的CSS或我的基本HTML中，我可能永远不会找到它。

来源

2012-03-07 FrustratedWDotNet

你可以链接到代码的现场版本看？ – 2012-03-07 10:59:34

不幸的是，这些大部分都是在私人开发服务器上完成的，但我会看看我能做些什么。 – FrustratedWDotNet 2012-03-07 11:00:53

而且，很明显，我已经拿出来制作测试页面，这是因为测试页面似乎是在表现。哎。 – FrustratedWDotNet 2012-03-07 11:31:35

我没有看到IE8和其他浏览器之间的任何区别。你能否更清楚地提一下你想要做的事？

来源

2012-03-07 11:33:55 harshakasireddy

是的 - 演示页实际上工作正常，令人沮丧。我在我的开发服务器上看到的问题是，图像的右侧边缘跳过了几个像素（或左侧下降了几个像素），导致按钮中出现明显的故障边境。 – FrustratedWDotNet 2012-03-07 13:08:37

尝试为IE8编写单独的样式表，并在主页中调用该样式表。在IE8样式表中给出与正确样式相同的类名来对齐图像。 – harshakasireddy 2012-03-07 13:18:09

感谢您的建议;我会试一试。 – FrustratedWDotNet 2012-03-07 13:30:06

滑动门CSS，按钮标记和IE8

回答

相关问题