Нижний колонтитул и радиальный градиент не работают на IE

0

Я работаю над школьным проектом, и мы должны построить поддельный веб-сайт для завтрака. Вот ссылка http://www.bbwillowlake.co.nf/. Если вы просматриваете сайт в Google Chrome, он работает нормально, но если вы просматриваете сайт в новом IE, вы можете видеть, что нижний колонтитул перекрывает текст внизу, а радиальный градиент не является радиальным, он линейный. Как я могу исправить это, пожалуйста, добавьте сайт в новый IE и Chrome, чтобы вы могли видеть разницу.

Вот код главной страницы.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
B & B Willow Lake | Home
</title>
<link rel="stylesheet" type="text/css" href="styles/layout.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<div id="wrapper">
<header id="header">
<h1><a href="index.php"><font color="#FFFFFF">B & B Willow Lake</font></a></h1>
</header>
<ul id="menu">
<li>
<a href="packages.php">Packages</a>
<ul>  
<li><a href="one_and_two_night.php">One and Two Night</a>
</li>
<li><a href="anniversary.php">Anniversary</a>
</li>
<li><a href="extended_stay.php">Extended Stay</a>
</li>
<li><a href="honey_moon.php">Honey Moon</a>
</li>
</ul>
</li>
<li><a href="activities.php">Activities</a>
<ul>
<li><a href="indoor.php">Indoor</a>
</li>
<li><a href="outdoor.php">Outdoor</a>
</li>
</ul>
</li>
<li><a href="dine.php">Dine</a>
<ul>
<li><a href="specials.php">Specials</a>
</li>
<li><a href="breakfast.php">BreakFast</a>
</li>
<li><a href="lunch.php">Lunch</a>
</li>
<li><a href="teaparty.php">Tea Party</a>
</li>
</ul>
</li>
<li><a href="contact_us.php">Contact Us</a>
<ul>
<li><a href="directions.php">Directions</a>
</li>
</ul>
</li>
</ul>
<section id="section_slide">
<img src="images/background.jpg" alt="background" id="png1"><img src="images/background3.jpg" alt="background2" id="png3"><img src="images/background2.jpg" alt="background3" id="png2"><img src="images/background4.jpg" alt="background4" id="png4">
</section>
<div id="middle_wrapper">
<section id="section">
<article>
<h2>Play</h2>
<a href="play.html"><img src="images/play.jpg" id="png5" alt="background5" id="picmain"></a>
<p>Here will go a text area that talks about all the stuff they can do out door and in door most of the descrpiton will be like the descrpition on the acrives page which it is refing to,<br />
<a id="learnmore" href="play.php">Learn More</a>
</p></article><hr /> 
<article>
<h2>Stay</h2><a href="stay.php"><img src="images/stay.jpg" id="png6" alt="background6" id="picmain2"></a>
<p>This wil be a ref to the package page just a shorter descrpiton so sum up what our stay is like all of these little text areas like play stay dine and cel shoul have a blue text area at the bottom that says learn more that when liked should link to the main page for the subject.<br />
<a id="learnmore2" href="stay.php">Learn More</a>
</p><hr /></article>
<article>
<h2>Dine</h2><a href="dine.php"><img src="images/dine.jpg" id="png7" alt="background7" id="picmain3"></a>
<p>Here will be a desc of the dine page which well tell the user the basics of what eating is like at the resort b and b willow lake it should also tell them that there is a kids menu for there kids and that there is fine dining for the adults and a lot of places to eat for the famlily and just for lovers to get away and eat.<br />
<a id="learnmore3" href="dine.php">Learn More</a>
</p><hr /></article>
<article>
<h2>Celebrate</h2><a href="cel.php"><img src="images/cel.jpg" id="png8" alt="background8" id="picmain4"></a>
<p>This well talk about the events that you can host and the resort like wewdings and birth days tea partys any thing from normal kids birth day partys to highclass wedingns and events of any sort.<br />
<a id="learnmore4" href="celebrate.php">Learn More</a>
</p></article>
</section>
<aside id="aside">
<br />
<br />
<pre>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" >
<input type="hidden" name="cmd" value="_s-xclick">
<table>
<tr><td><input type="hidden" name="on0" value="Packages">Packages</td></tr><tr><td><select name="os0">
    <option value="One and Two Night">One and Two Night $1,000.00 USD</option>
    <option value="Anniversary">Anniversary $1,000.00 USD</option>
    <option value="Extended Stay">Extended Stay $1,000.00 USD</option>
    <option value="Honey Moon">Honey Moon $1,000.00 USD</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

<br />
<br />
<br />
</pre>
<h2>Why Us?</h2>
<p>
<pre>
adsfsdafasdfadfsdafasfsdafasdfa<br />dfsdafadfdddddddujhyjbddddddd<br />dddddddddddddddddddddddd<br />
asdfasdfsdafadsdfasdfdsfadsfasdfa<br />dfadsfasdfadfda<br />sfasdfasdfasdfasdfsdafsdafdsafd<br />
dsasdfdsfsdfasdfasdfdfddddddddddddd<br />ddddddddddddddddddddddddd<br />dddddddddddd<br />
dddddddddddddddddddddddddddddddddd<br />Sddddddddddddddddddddddddd<br />ddddddddddddddd<br />
</pre>
</p>
<br />
<br />
<br />
<iframe title="Youtube video player" width="90%" height="390px" src="http://www.youtube.com/watch?v=mI6aVSzZsps&list=TLctir32a34lOmJXkxNcviVk5lubS_IL3N"></iframe><br />
<a href="http://www.facebook.com/"><img src="images/facebook.gif" alt="facebook" id="facebook"></a><a href="http://www.twitter.com/"><img src="images/twitter.gif" alt="twitter" id="twitter"></a><a href="http://www.google.com/"><img src="images/g+.gif" alt="g+" id="google"></a><a href="http://www.youtube.com/"><img src="images/youtube.gif" alt="youtube" id="youtube"><br /></a>
</aside>
</div>
</div>
<footer id="footer">
<h1><a href="index.php"><font color="#FFFFFF">B & B Willow Lake</font></a></h1>
<p>
[email protected]
</p>
<p>
</p>
</footer>
</body>
</html>

Вот код для style.css

*{
font-family:Verdana;
}
body {  
background: -webkit-radial-gradient(#D8D8D8, #A4A4A4, #6E6E6E); /* Safari */
background: -o-radial-gradient(#D8D8D8, #A4A4A4, #6E6E6E); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(#D8D8D8, #A4A4A4, #6E6E6E); /* For Firefox 3.6 to 15 */
background: radial-gradient(#D8D8D8, #A4A4A4, #6E6E6E); /* Standard syntax */
}
pre {
    overflow-x: auto; /* Use horizontal scroller if needed */
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    white-space : normal;
}  
#header{
color: #FFF;
background: #111;
background: -moz-linear-gradient(#5882FA, #3D72A4); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #5882FA),color-stop(1, #3D72A4));    background: -webkit-linear-gradient(#5882FA, #3D72A4);  
background: -o-linear-gradient(#5882FA, #3D72A4);
background: -ms-linear-gradient(#5882FA, #3D72A4);
background: linear-gradient(#5882FA, #3D72A4);
}
#facebook{
width:50px;
height:50PX;
margin-left:5px;
}
#twitter{
width:50px;
height:50PX;
margin-left:5px;
}
#google{
width:50px;
height:50PX;
margin-left:5px;
}
#youtube{
width:50px;
height:50PX;
margin-left:5px;
}
#picmain{
text-align:center;
width:150px;
height:150px;
}
#picmain2{
text-align:center;
width:150px;
height:150px;
}
#picmain3{
text-align:center;
width:150px;
height:150px;
}
#picmain4{
text-align:center;
width:150px;
height:150px;
}

h1{
color: #FFF;
text-shadow: 0 1px 0 #000;
text-decoration:none;
}
h1 a{
text-decoration: none;
color: #FFF;
}
h2{
color: #000;
margin-bottom:8px;
text-shadow: 0 1px 0 #000;
}
#nav{
background-color: #254159;
color: #FFFFFF;
text-align: center;
}
a{
text-decoration:none;
}
a:link{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
#section_slide{
background-color: #FFFFFF;
}
img{
}
#section{
background-color: #FFF;
}
#png1{
width:25%;
height:150px;
}
#png2{
width:25%;
height:150px;
}
#png3{
width:25%;
height:150px;
}
#png4{
width:25%;
height:150px;
}
#png5{
width:150px;
height:150px;
transition:width 2s, height 2s, transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
#png5:hover{
width:250px;
height:250px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg); /* Safari */
}
#png6{
width:150px;
height:150px;
transition:width 2s, height 2s, transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
#button{
width:auto;
height:25px;
background: #111;
background: -moz-linear-gradient(#444, #111); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));  background: -webkit-linear-gradient(#444, #111);    
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
color:#FFF;
}
#png6:hover{
width:250px;
height:250px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg); /* Safari */
}
img{
border: none;
}
hr{
background: #111;
background: -moz-linear-gradient(#444, #111); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));  background: -webkit-linear-gradient(#444, #111);    
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
height: 1px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;  
}
#png7{
width:150px;
height:150px;
transition:width 2s, height 2s, transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
#png7:hover{
width:250px;
height:250px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg); /* Safari */
}
#png8{
width:150px;
height:150px;
transition:width 2s, height 2s, transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
#png8:hover{
width:250px;
height:250px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg); /* Safari */
}
#aside{
background: #111;
background: -moz-linear-gradient(#5882FA, #3D72A4); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #5882FA),color-stop(1, #3D72A4));    background: -webkit-linear-gradient(#5882FA, #3D72A4);  
background: -o-linear-gradient(#5882FA, #3D72A4);
background: -ms-linear-gradient(#5882FA, #3D72A4);
background: linear-gradient(#5882FA, #3D72A4);
}
#footer{
background: #111;
background: -moz-linear-gradient(#444, #111); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));  background: -webkit-linear-gradient(#444, #111);    
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
color:#FFFFFF;
}
#menu{
width: 82%;
margin-left: auto;
margin-right: auto;
padding: 10px 0 0 0;
list-style: none;  
background: #111;
background: -moz-linear-gradient(#444, #111); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));  background: -webkit-linear-gradient(#444, #111);    
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}

#menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
color: #FFF;
}

*html #menu li a:hover{ /* IE6 */
color: #FFFFFF;
}

#menu li:hover > ul{
display: block;
}

/* Sub-menu */

#menu ul{
list-style: none;
margin: 0;
padding: 0;    
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;    
background: #FFFFFF;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);    
background: -o-linear-gradient(#444, #111); 
background: -ms-linear-gradient(#444, #111);    
background: linear-gradient(#444, #111);    
}

#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;  
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{   
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;    
}

#menu ul a{    
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

*html #menu ul a{ /* IE6 */   
height: 10px;
width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */    
height: 10px;
width: 150px;
}

.button{
background-color:red;
}

#menu ul a:hover{
background: #111;
background: -moz-linear-gradient(#5882FA, #3D72A4); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #5882FA),color-stop(1, #3D72A4));    background: -webkit-linear-gradient(#5882FA, #3D72A4);  
background: -o-linear-gradient(#5882FA, #3D72A4);
background: -ms-linear-gradient(#5882FA, #3D72A4);
background: linear-gradient(#5882FA, #3D72A4);
}

#menu ul li:first-child a{
}

#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
border-bottom-color: #FFF;
}

#menu ul li:last-child a{
}

/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

#learnmore{
color: blue;
}

#learnmore2{
color: blue;
}

#learnmore3{
color: blue;
}

#learnmore4{
color: blue;
}
* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

Вот страница css.

*{
margin: 0px;
padding: 0px;
}
#wrapper{
width: 82%;
height: auto;
margin-left: auto;
margin-right: auto;
}
#header{
width: 82%;
height: 75px;
margin-left: auto;
margin-right: auto;
}
#nav{
width: 82%;
height: 32px;
margin-left: auto;
margin-right: auto;
}
#section_slide{
width: 82%;
height: 150px;
margin-left: auto;
margin-right: auto;
}
#middle_wrapper{
width: 82%;
height:auto;
margin-left: auto;
margin-right: auto;
}
#section{
width: 56%;
height:auto;
padding: 2%;
float: left;
margin-bottom:150px;
}
#aside{
width: 36%;
height:auto;
padding: 2%;
float: left;
}
#footer{
width: 100%;
height: 75px;
margin-left: auto;
margin-right: auto;
clear: both;
position: fixed;
bottom: 0
}
  • 0
    Какую версию Internet Explorer вы тестируете? IE8 / 9 не поддерживает CSS-градиенты. IE10 / 11, видимо, поддерживают их. Для IE9 вы можете использовать фоновое изображение SVG.
  • 0
    Ваш радиальный градиент является радиальным, а не линейным в IE10. Проблема в том, что ваше тело имеет высоту всего 302 пикселя, поэтому оно повторяется по горизонтали (чего не происходит в Chrome по некоторым причинам). Я не знаю, почему тело имеет такую высоту, просто нужно пройти через много кода. Вы знаете, как сделать уменьшенный тест?
Показать ещё 1 комментарий
Теги:
internet-explorer

2 ответа

2

На самом деле это проблема с плавающими элементами html. Ваш <div id="wrapper"> содержит элементы, которые float: left; , Когда вы float элемент, его родительский элемент автоматически не расширяется, чтобы содержать любые всплывающие дочерние элементы. Для этого вам необходимо clear плавающие элементы.

Прочитайте статью http://css-tricks.com/all-about-floats/, в которой объясняется теория, лежащая в основе float, и способы ее очистки намного подробнее.

Кроме того, IE8 и 9 не поддерживали CSS-градиенты. IE10 и 11 поддерживают их. Для IE9 вместо этого вы можете использовать фоновое изображение SVG.

Поделиться
  • 0
    Так что мне нужно и однозначно: оба; во всех элементах с плавающей точкой: слева;
  • 0
    Почти :) Вам понадобится <div> с clear: both; после плавающих элементов div или одного из других методов в разделе «Методы очистки поплавков» связанной статьи. Метод переполнения, вероятно, самый простой.
0

Я бы попробовал css3pie, это CSS 3 Progressive Internet Explorer, плагин, который поможет IE отображать CSS3. http://css3pie.com/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню