0
我遇到了一些網站的CSS標籤內容的一些麻煩。客戶端剛剛要求將圖片添加到背景中，我已經完成了這一操作，並且在Chrome和IE中運行良好。但是在Safari中，圖像正在被切斷，請參閱我所指的http://jsfiddle.net/j9Ftx/11/。 CSS中必須有一些控制寬度的選項卡，但我找不到。標籤內容背景切斷在Safari中，但在Chrome中罰款
感謝所有幫助
.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>