ebay 的 CSS 标签位置

Question

我在为 ebay 组合一些 CSS 标签时遇到了麻烦。

eBay(无论如何在英国)现在不允许 JS，所以我正在尝试制作一些 CSS。但是，在创建选项卡时存在定位问题。它下面的任何内容都只是重叠。

我试过绝对定位和固定定位，但这并不能解决问题。

我已经研究了好几天了，但似乎一无所获。

这是 jsfiddle

html:

<div id="wpl_wrapper">
<div id="wpl_store_header">
<div class="hotline">HOTLINE: 123 - 456 789</div>
<div class="clearfix"> </div>
</div>
<div class="main_section">
<h3 class="bar">[[product_title]]</h3>
<table>
<tbody>
<tr>
<td class="primary">
<div id="wpl_main_image">[[product_main_image]]</div>
<div id="wpl_list_images">[[additional_product_images]]</div>
</td>
<td class="wpl_description secondary">
<h2>[[product_title]]</h2>
<p class="long_desc">[[product_excerpt]]</p>
</td>
</tr>
</tbody>
</table>
<div class="section">
<p><span style="color: #ffffff;">.</span></p>
<ul class="tabs">
<li><input id="tab1" type="radio" checked="checked" name="tabs" /> <label  for="tab1">Description</label>
<div class="tab-content animated fadeIn" id="tab-content1">The AT-X 116 PRO DX-II 11 16mm f/2.8 Lens for Canon Mount by Tokina is an ultra-wide angle auto-focus zoom lens with a fast f/2.8 aperture throughout the zoom range. The f/2.8 aperture guarantees fast shutter speeds, active auto-focus and minimal blur in low light situations. The AT-X 116 PRO DX-II lens is designed for digital cameras with APS-C-size CMOS or CCD sensors. Its angle of view ranges from 82-104º and it can focus as close as 11.81″ (0.3 m). Nine shutter blades in the aperture help to create soft out-of-focus backgrounds and two Super-Low Dispersion glass elements and two aspheric elements help to achieve this lens’ excellent contrast, sharpness and minimal chromatic aberration. As an update to their AT-X 116 PRO DX, Tokina has improved the multi-layer coatings to minimize light reflection and improve optical performance. The PRO DX-II has a silent focusing motor which is ideal if shooting video with your digital camera.

Tokina’s One-touch Focus Clutch Mechanism allows the photographer to switch between auto-focus and manual focus with a simple push of the focus ring. Snapping it forward into auto-focus and back into manual focus is all that needs be done, there’s no need to adjust the AF/MF switch on the camera body. This is a durable, bright, quality-optic AF lens.

Note! While the lens is designed for APS-C sized sensors it can work on full frame DSLR cameras as well, however some vignetting will occur.</div>
</li>
<li><input id="tab2" type="radio" name="tabs" /> <label for="tab2">What's Included</label>
<div class="tab-content animated fadeIn" id="tab-content2">[[meta_WHATSTAB]]</div>
</li>
<li><input id="tab3" type="radio" name="tabs" /> <label for="tab3">Specification</label>
<div class="tab-content animated fadeIn" id="tab-content3">[[meta_SPECTAB]]</div>
</li>
</ul>
</div>
<p><span style="color: #ffffff;">.</span></p>
<p><span style="color: #ffffff;">. </span></p>
<p><span style="color: #ffffff;"> .</span></p>
<div class="section">
<h3 class="bar">Shipping</h3>
<p><strong>Shipping cost:</strong><br /> <i>replace this text with your shipping information</i></p>
<p><strong>Delivery time:</strong><br /> <i>replace this text with your shipping information</i></p>
</div>
<div class="section">
<h3 class="bar">Payment</h3>
<p>We accept the following payment methods:</p>
<ul>
<li>first payment option</li>
<li>second payment option</li>
<li>third payment option</li>
</ul>
<p>Please contact us if you have any questions.</p>
</div>
<div class="section">
<h3 class="bar">Service</h3>
<p><i>replace this text with your service information</i></p>
</div>
<div class="section">
<h3 class="bar">Recent additions</h3>
<p>[[widget_new_listings]]</p>
</div>
<p><!-- #wpl_wrapper --></p>

CSS:

    /* user colors */
#wpl_store_header .hotline {
    color: $hotline_color;
    background-color: $hotline_bgcolor;
    display: $display_hotline;
}

#wpl_wrapper .wpl_description h2 {
    color: $title_color;
}

#wpl_wrapper h3.bar {
    color: $section_head_color;
    background-color: $section_head_bgcolor_top;
    background-image: -webkit-gradient(linear, left top, left bottom, from($section_head_bgcolor_top), to($section_head_bgcolor_bottom));
    background-image: -webkit-linear-gradient(top, $section_head_bgcolor_top, $section_head_bgcolor_bottom);
    background-image:    -moz-linear-gradient(top, $section_head_bgcolor_top, $section_head_bgcolor_bottom);
    background-image:     -ms-linear-gradient(top, $section_head_bgcolor_top, $section_head_bgcolor_bottom);
    background-image:      -o-linear-gradient(top, $section_head_bgcolor_top, $section_head_bgcolor_bottom);
    background-image:         linear-gradient(to bottom, $section_head_bgcolor_top, $section_head_bgcolor_bottom);
}



/* layout */
#wpl_wrapper {
    width: 780px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 30px;
    margin-bottom: 20px;
    padding: 10px;
    font-size: 14px;
    font-family:Arial,Helvetica,sans-serif;
}

#wpl_store_header {       
    width:100%;
    overflow: hidden;
}

.wpl_description {
    padding: 0 30px 10px 0;
}

#wpl_main_image {
    height:370px;
    width:370px;
}

#wpl_main_image img {
    max-height:360px;
    max-width:350px;
    margin-top:0px;
}

/* image thumbnails - 3 columns */
#wpl_list_images {
    text-align:center;
    margin-top:10px;
}

#wpl_list_images a {
    float:left;
    display:block;
    width:75px;
    height:75px;
    border: 1px solid #ccc;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:20px;
    padding:12px; 
}

#wpl_list_images img {
    border:none;
    max-height: 75px;
    max-width: 75px;
    width: auto;
} 




#wpl_wrapper h2 {
    font-size: 24px;
    line-height: 30px;
}

#wpl_wrapper h3.bar {
    margin-top: 30px;
    margin-bottom: 20px;
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    font-family: Helvetica, Arial, sans-serif;
    -webkit-border-radius: $border_radius;
    -moz-border-radius: $border_radius;
    border-radius: $border_radius; 
}

#wpl_store_header .logo {
    float: left;    
}
#wpl_store_header .hotline {
    float: right;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    font-weight: bold;
    padding-right: 20px;
    padding-left: 20px;
    margin-top: 7px;
    -webkit-border-radius: $border_radius;
    -moz-border-radius: $border_radius;
    border-radius: $border_radius;
    text-decoration: none;
    text-shadow: 2px 2px 4px #713803;
    filter: dropshadow(color=#713803, offx=0, offy=1);
}
#wpl_wrapper .clearfix {
    clear:both;
}

#wpl_wrapper .main_section .primary{
    /*width: 250px;*/
    width: 50%;
    vertical-align: top;
    padding-right: 10px;
    text-align: center;
}
#wpl_wrapper .main_section .secondary{
    /*width: 490px;*/
    width: 50%;
    vertical-align: top;
    padding-right: 10px;
    font-size: 16px;
}

#wpl_wrapper .section p {
    padding-left: 10px;
    padding-right: 10px;
}

#wpl_wrapper .section big {
    font-size: 18px;
    font-weight: bold;
}

#wpl_wrapper .alignleft {
    float: left;
}
#wpl_wrapper .alignright {
    float: right;
}

/* these only apply in preview to override default styles from wp-admin */
body.wp-admin #wpl_wrapper ul {
    list-style: disc inside none;
}
body.wp-admin #wpl_wrapper ul li {
    padding-left: 2em;
}

/**
 * CSS3 tabbed interface
 *     - based on http://www.sitepoint.com/css3-tabs-using-target-selector/
 *  - 1st tab is LAST in markup:
 *      - so it can be styled as active on page load
 *      - use combination of :target and ~ to override when another tab is clicked
 */
  .tabs input[type=radio] {
      position: absolute;
      top: -9999px;
      left: -9999px;
  }       

  .tabs {
    width: 650px;
    float: none;
    list-style: none;
    position: relative;
    padding: 0;
    margin: 5px auto;
  }
  .tabs li{
    float: left;
  }
  .tabs label {
      display: block;
      padding: 10px 20px;
      border-radius: 2px 2px 0 0;
      color: #3777be;
      font-size: 16px;
      font-weight: normal;
      background: rgba(255,255,255,0.2);
      cursor: pointer;
      position: relative;
      top: 3px;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
  }
  .tabs label:hover {
    background: rgba(255,255,255,0.5);
    top: 0;
  }

  [id^=tab]:checked + label {
    background: #3777be;
    color: white;
    top: 0;
  }

  [id^=tab]:checked ~ [id^=tab-content] {
      display: block;
  }
  .tab-content{
    z-index: 2;
    display: none;
    text-align: left;
    width: 100%;
    font-size: 20px;
    line-height: 140%;
    padding-top: 5px;
    background: #fff;
    border: 2px;
    padding: 15px;
    color: #000;
    position: absolute;
    top: 53px;
    left: 0;
    box-sizing: border-box;
    -webkit-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
  }

Answer 1

这里有一个解决方法可能会有所帮助:在 .tab-content 上使用 overflow:hidden; 并在 .tabs height:700px; 上声明一个高度(不太好) . Jsfiddle从 CSS-Tricks 中找到