Web サイトで Jquery タブを使用しようとしていますが、少しスタイルアップしました... 友人に ie 7 でどのように見えるかを確認するように依頼しましたが、うまくいきません... すべてのタブ
現在のすべてのブラウザでの表示と動作は次のとおりです。
そして、これがie 7での外観です
別の問題は、選択されていないタブに含まれる要素が非表示のままである必要がある一方で、選択されたタブの内容がその下に表示されることです...つまり、システム全体が壊れており、選択されていないすべてのタブの内容も表示するだけです
コード：
<div class = 'midContentContainer'>
<div id = 'buttonAddBlog'>
<a href = '#tabs-3'></a>
</div>
<div id="tabs">
<ul>
<li><a id = 'tab1'href="#tabs-1">Questions</a></li>
<li><a id = 'tab2'href="#tabs-2">Blogs</a></li>
<li><a id = 'tab3'href="#tabs-3">Create Your Own <span style = 'color:#0499ff'> NEW! </span></a></li>
</ul>
<div id="tabs-1">
<p style = 'font-size: 14px; font-family: "Helvetica Neue",sans-serif; color: #444;'> Ask any academic question and our Quick GPA team and active community will respond in a timely manner. Whether it's tips on school, math equations, or even philosophical studies, we are there to make sure you get the answer you need. </p>
<br/>
<div class = 'createYourOwnText' style = 'background-color: #fefefe; padding: 10px; border: 1px dashed #1585b8;'>
<strong> Ask your own question by clicking the 'create your own' link above! </strong>
</div>
<h3 id = 'questionsHeader'> Questions </h3>
<?php
$allPostsArray = retrieveAllPosts();
displayAllPostsFrom($allPostsArray);
?>
<div class = 'dialog'>
</div>
</div>
<div id="tabs-2">
<p style = 'font-size: 14px; font-family: "Helvetica Neue",sans-serif; color: #444;'> Read our wide variety of blogs, written by both the Quick GPA Team and our active community. These cover all spectrums of academics. Now, you can create your own blog to be posted on our site. </p>
<br/>
<div class = 'createYourOwnText' style = 'background-color: #fefefe; padding: 10px; border: 1px dashed #1585b8;'>
<strong> Create your own article by clicking the 'create your own' link above! </strong>
</div>
<h3 id = 'questionHeader'> Articles </h3>
<?php
$allPostsArray = retrieveAllArticles();
displayAllArticlesFrom($allPostsArray);
?>
</div>
<div id="tabs-3">
<div id = 'tabs2'>
<ul style = 'text-transform: uppercase;'>
<li><a id = 'tab1'href="#tabs-4">Ask a Question</a></li>
<li><a id = 'tab2'href="#tabs-5">Write a Blog</a></li>
</ul>
<div id = 'tabs-4' style = 'height: 460px;'>
<form action = "insertBlog.php" id = 'questionInsertForm' method = 'post'>
<span style = 'font-size: 15px; font-weight: bold; font-family: "Helvetica Neue";'>Question</span><br/><br/>
<input placeholder = 'title of your question? be specific...'style = 'border: 1px solid #bbb; width: 250px;'type = 'text' name = 'subject' ><br/><br/>
<span style = 'font-size: 15px;font-weight: bold; font-family: "Helvetica Neue";'>More Detail (Optional)</span><br/><br/>
<textarea name = 'body' style = 'width: 85%; height: 120px;'></textarea>
<br/><br/>
<input type = 'text' style= 'width: 400px; font-size: 12px;'name = 'tags' placeholder = "what's your question category"><br/><br/>
<input type = 'text' style = 'width: 400px;' id = 'email2'name = 'user' placeholder = 'Your email...'>
<span id = 'questionError' style = 'font-size: 12px; color: red;font-family: "Helvetica Neue";'>
<br/>
Your Email information is completely hidden to users and will be used only to notify you when you get a response.
<br/>
</span>
<br/>
<button id = 'questionButton' class = 'btn blue'> Create </button>
</form>
</div>
<div id = 'tabs-5' style = 'height: 460px;'>
<form action = "insertArticle.php" id = 'articleInsertForm' method = 'post'>
<span style = 'font-size: 15px; font-weight: bold; font-family: "Helvetica Neue";'>Title</span><br/><br/>
<input placeholder = 'Title of your article, be specific...'style = 'border: 1px solid #bbb; width: 250px;'type = 'text' name = 'subject' ><br/><br/>
<span style = 'font-size: 15px;font-weight: bold; font-family: "Helvetica Neue";'>Post</span><br/><br/>
<textarea name = 'body' style = 'width: 85%; height: 120px;'></textarea><br/><br/>
<input type = 'text' style= 'width: 400px; font-size: 12px;'name = 'tags' placeholder = "what's your post category"><br/><br/>
<input type = 'text' style= 'width: 400px; font-size: 12px;' id = 'email' name = 'user' placeholder = 'Your email...'>
<span id = 'emailError' style = 'font-size: 12px; color: red;font-family: "Helvetica Neue";'>
<br/>
Your Email information is completely hidden to users and will be used only to notify you when you get a response.
<br/>
</span>
<br/>
<button id = 'submitArticle' class = 'btn blue'> Create </button>
</form>
</div>
</div>
</div>
</div>
<?php include_once('includes/activeSideBar.php'); ?>
</div>
<?php include_once('includes/footer.php'); ?>
</div>
</div>
<?php require_once('includes/facebookShareFooter.php'); ?>
</div>
そしてスタイルシート:
#tabs{
width: 68%;
float: left;
margin-top: 20px;
background: transparent;
border: none;
}
#tabs ul{
list-style: none;
}
#tabs .ui-widget-header {
background: transparent;
border: none;
border-bottom: 1px solid #c0c0c0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
#tabs .ui-tabs-nav .ui-state-default {
background: transparent;
border: none;
}
#tabs .ui-tabs-nav .ui-state-active {
background: transparent url(arrow2.png) no-repeat bottom center;
border: none;
}
#tabs .ui-tabs-nav .ui-state-default a {
color: #c0c0c0;
outline: none;
}
#tabs .ui-tabs-nav .ui-state-active a {
color: #459e00;
outline: none;
}