Question

我正在处理一个html文件/ CSS外部样式表在chrome，firefox和opera中一切看起来都很精彩，但是当在Internet Explorer中查看任何内容时，网站的某些切片在它们应居中时是齐齐的，我在iphone和ipad设备上缺少我的字体。

有人有解决方案吗？我尝试过使用！important;标签，据我所知你是这样写的：

HTML：

<img class="timelineArrow" src="http://assets.daddario.com/html_fragments/images/timelineArrow.png" alt="timelineArrow">
                    <img class="barneyNotCows" src="http://assets.daddario.com/html_fragments/images/notcows_barney.png" alt="barney">

                    <!--Timeline-->
                    <div class="bulletPlayer" id="bullet1" style="display:">
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet1');" class="bulletOne selected"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet2');" class="bulletTwo"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet3');" class="bulletThree"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet4');" class="bulletFour"></a><br />
                    </div>
                    <div class="bulletPlayer" id="bullet2" style="display: none;">
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet1');" class="bulletOne"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet2');" class="bulletTwo selected"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet3');" class="bulletThree"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet4');" class="bulletFour"></a><br />
                    </div>
                    <div class="bulletPlayer" id="bullet3" style="display: none;">
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet1');" class="bulletOne"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet2');" class="bulletTwo"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet3');" class="bulletThree selected"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet4');" class="bulletFour"></a><br />
                    </div>
                    <div class="bulletPlayer" id="bullet4" style="display: none;">
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet1');" class="bulletOne"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet2');" class="bulletTwo"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet3');" class="bulletThree"></a><br />
                            <a href="javascript:void(0)" onMouseUp="chooseFact('bullet4');" class="bulletFour selected"></a><br />
                    </div>

CSS：

/*** TIMELINE ASSETS */
.timelineArrow
{
    position: absolute;
    margin-left: -18px;
    margin-top: 98px;
}

.barneyNotCows
{
    position: absolute;
    margin-top: 530px;
    margin-left: -243px;
}

.bulletPlayer
{
    position: relative;
    text-align: center;
    z-index: 9999;
}
.bulletOne {
    position: absolute;
    top: 200px;
    margin-left: -18px;
    width: 500px;
    height: 246px;
    background: url(images/dotOneUpState.png) no-repeat left top;
}
.bulletOne:hover, 
.bulletOne.selected {
    background: url(images/dotOneDownState.png) no-repeat left top;
    top: 200px;
    margin-left: -22px;
}
.bulletTwo {
    position: absolute;
    top: 330px;
    margin-left:-17px;
    width: 500px;
    height: 246px;
    background: url(images/dotTwoUpState.png) no-repeat left top;
}
.bulletTwo:hover, 
.bulletTwo.selected {
    background: url(images/dotTwoDownState.png) no-repeat left top;
    top: 330px;
    margin-left: -20px;
}
.bulletThree {
    position: absolute;
    top: 471px;
    margin-left:-16px;
    width: 500px;
    height: 246px;
    background: url(images/dotThreeUpState.png) no-repeat left top;
}
.bulletThree:hover, 
.bulletThree.selected {
    background: url(images/dotThreeDownState.png) no-repeat left top;
    top: 471px;
    margin-left: -21px;
}
.bulletFour {
    position: absolute;
    top: 591px;
    margin-left:-17px;
    width: 500px;
    height: 203px;
    background: url(images/dotFourUpState.png) no-repeat left top;
}
.bulletFour:hover, 
.bulletFour.selected {
    background: url(images/dotFourDownState.png) no-repeat left top;
    top: 591px;
    margin-left: -21px;
}

的JavaScript

// HIDE AND REVEAL TABS
function chooseFact(tab) {

// SET THE CHOSEN SECTION AS VISIBLE AND HIDE THE OTHERS
document.getElementById('bullet1').style.display = "none";
document.getElementById('bullet2').style.display = "none";
document.getElementById('bullet3').style.display = "none";
document.getElementById('bullet4').style.display = "none";
document.getElementById(tab).style.display = "block";

} HTML，CSS和JavaScript以上工作在CHROME，FIREFOX和SAFARAI但不是Internet Explorer。不知道如何解决这个问题。

根据我的理解，重要的标签将取消我放置的第一个位置并使用IE中的部分位置，并且Chrome忽略重要的标签。这是有人告诉我的，但是我已经看到了其他情况，并希望在IE浏览器中找到解决定位问题的更好解决方案。

不幸的是，由于我们的CMS，我不得不使用html4和常规CSS对html 5和CSS3进行编码：/

非常感谢任何帮助。

谢谢！

我还提供了Chrome VS IE中的外观图片

这是Chrome：

这是IE

Answer 1

在Internet Explorer中，您可以按F12键。在那里，您可以使用元素检查器找出应用的样式，哪些样式不适用。

另请参阅https://msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx和https://www.youtube.com/watch?v=GbbjL_Uir24，了解有关在Internet Explorer中测试CSS的全局信息。

重要的标签

1 个答案: