我在网站的 css 选项卡内容方面遇到了一些问题。客户端刚刚要求将图像添加到背景中，我已经这样做了，它在 Chrome 和 IE 中运行良好。但是在 Safari 中，图像被截断，请参阅http://jsfiddle.net/j9Ftx/11/了解我所指的内容。控制宽度的选项卡的 CSS 中必须有一些东西，但我找不到什么。
谢谢你的帮助
.tabs {
position: relative;
margin: 40px auto;
width: 810px;
background-color:#FFFFFF;
background-image:url(http://creationdev.co.uk/expressiveprint/images/parrot.png);
background-repeat:no-repeat;
}
.tabs input {
position: absolute;
z-index: 1000;
height: 40px;
left: 0px;
top: 40px;
opacity: 0;
cursor: pointer;
}
.tabs input#tab-2{
top: 80px;
}
.tabs input#tab-3{
top: 120px;
}
.tabs input#tab-4{
top: 160px;
}
.tabs input#tab-5{
top: 200px;
}
.tabs label {
background: #1c1c1c;
margin-top:8px;
font-size:32px;
font-weight:normal;
line-height: 40px;
height: 40px;
position: relative;
padding: 0 20px;
display: block;
width: auto;
color: #ffffff;
text-align: right;
float: left;
clear: both;
z-index:2000;
}
.tabs label:after {
content: '';
background: #ffffff;
color:#1c1c1c;
position: absolute;
right: -2px;
top: 0;
width: 2px;
height: 100%;
}
.tabs input:hover + label {
background: #5e5e5e;
}
.tabs label:first-of-type {
z-index: 4;
}
.tab-label-2 {
z-index: 3;
}
.tab-label-3 {
z-index: 2;
}
.tab-label-4 {
z-index: 1;
}
.tab-label-5 {
z-index: 1;
}
.tabs input:checked + label {
background: #c196c5;
color:#ffffff;
z-index: 6;
}
.content h2 {
font-size:30px;
}
.clear-shadow {
clear: both;
}
.content {
background: #fff;
position: relative;
width: auto;
margin: -175px 0 0 200px;
height: 430px;
z-index: 5;
overflow: hidden;
}
.content div {
position: absolute;
top: 0;
padding: 10px 40px;
z-index: 1;
opacity: 0;
-webkit-transition: all linear 0.5s;
-moz-transition: all linear 0.5s;
-o-transition: all linear 0.5s;
-ms-transition: all linear 0.5s;
transition: all linear 0.5s;
}
.content div{
-webkit-transform: translateY(-450px);
-moz-transform: translateY(-450px);
-o-transform: translateY(-450px);
-ms-transform: translateY(-450px);
transform: translateY(-450px);
}
.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4,
.tabs input.tab-selector-5:checked ~ .content .content-5 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
z-index: 100;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all ease-out 0.3s 0.3s;
-moz-transition: all ease-out 0.3s 0.3s;
-o-transition: all ease-out 0.3s 0.3s;
-ms-transition: all ease-out 0.3s 0.3s;
transition: all ease-out 0.3s 0.3s;
}
.content div h2,
.content div h3{
color: #1c1c1c;
text-align:left;
}
.content div p {
font-size: 14px;
line-height: 22px;
text-align: left;
margin: 0;
color: #777;
}
<div class="content2">
<h3><span class="black"> Services </span></h3>
<div class="container">
<!-- Codrops top bar -->
<section class="tabs">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1">Print</label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2">Direct Mail</label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3">Hand Finishing</label>
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
<label for="tab-4" class="tab-label-4">Fullfilment</label>
<input id="tab-5" type="radio" name="radio-set" class="tab-selector-5" />
<label for="tab-5" class="tab-label-5">POS</label>
<div class="clear-shadow"></div>
<div class="content">
<div class="content-1">
<h2>Let our print capture your customers’ imagination.</h2>
<p>If you need creative, concise and competitively priced print then you should be talking to Expressive Print. Either supply your own artwork or make use of our full design and copy writing service. Whatever your print requirements be it brochures, inserts, questionnaires, leaflets or envelopes we can offer highly competitive prices together with outstanding print quality. A full creative and design service is offered to compliment your existing activity or devise a fresh new look for your brand or campaign. We aim to understand your requirements and translate them into great design with strong copy while also being environmentally friendly, cost effective and delivering to schedule.</p>
</div>
<div class="content-2">
<h2>Excellent response rates and return on investment.</h2>
<p>Expressive Print handle low and high volume direct mail campaigns making use of the latest developments to ensure your mailings are relevant and results driven. Better targeted Direct Mail is seeing a resurgence as an apathy to email communication grows especially in the B2B sector. We strive to ensure that the data is carefully selected and targeted and visual presentation is to the highest standard to ensure excellent response rates and return on investment for each campaign.</p>
</div>
<div class="content-3">
<h2>Hand Finishing</h2>
<p>Many campaigns require some element of hand finishing before mailing such as the attachment of a business cards or a CD. Expressive Print will implement the application most suitable for your mail piece selecting the correct tack and materials to ensure a good visual finish. Don’t allow your mailing piece to be spoilt at the final stage by unsympathetic finishing.</p>
</div>
<div class="content-4">
<h2>Fullfilment</h2>
<p>Whatever your project involves Expressive Print are experienced in delivering it for you. From daily pick and pack requirements to contract packing and bulk despatches we have the ideal space to work in - clean, modern and secure premises with packing teams who are all fully CRB checked, robust stock control systems, comprehensive insurance cover and expertise. This ensures the right things are packed in the right order and sent the right people – simple but critical. Selecting a fulfilment partner who has strong systems with full accountability and customer service resource is vital to ensure your product’s success.</p>
</div>
<div class="content-5">
<h2>POS & Kit Collation</h2>
<p>Handling large despatch projects for Education, Banking and the Drinks industry, Expressive Print ensure that each project has it’s own documented process system with full track and trace on all deliveries. We source and supply specialist packaging for those fragile or odd shaped items and fully test packs and packaging prior to despatch to ensure delivery in pristine condition.</p>
</div>
</div></div>
</div>