CSS Các lựa chọn thay thế cho style = "display: none"

Tôi đang triển khai cơ sở thành phần JSF nơi bạn phải ghi đè lên css đang được sử dụng hoặc nó sẽ sử dụng css mặc định của nó. Tôi đang cố gắng để ẩn cố gắng để ẩn div và tôi đã cố gắng để thiết lập phong phú-panelbar-header-act class style = "display: none", nhưng sau đó nó kéo trong css mặc định của nó. Có cách nào để thêm một thuộc tính phong cách để rich-panelbar-header-act (kể từ khi tôi phải thực hiện các lớp) mà ẩn div? Tôi đã bao gồm css và html của tôi beloCSS Các lựa chọn thay thế cho style = "display: none"

CSS:

element.style { 
} 
Matched CSS Rules 
.rich-panelbar-header-act { 
background-image: url(/spot-main-web/a4j/g/3_3_3.Finalorg.richfaces.renderkit.html.GradientA/DATB/eAGLj48PDQ1lBAAJswIe.html); 
background-position: top left; 
background-repeat: repeat-x; 
vertical-align: middle; 
color: #FFF; 
background-color: #555; 
font-size: 11px; 
font-weight: bold; 
font-family: Arial,Verdana,sans-serif; 
} 
.rich-panelbar-header-act { 
border: 0 solid red; 
padding: 0 1px 1px 5px; 
cursor: pointer; 
} 
user agent stylesheetdiv { 
display: block; 
} 
Inherited from body.browserChrome.browserChrome2 
body { 
font: 12px/17px Helvetica, Arial, Verdana; 
}

HTML:

<html version="XHTML 2.0" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head></head> 
<body> 
<div class="rich-panelbar rich-panelbar-b " id="j_id95" style="padding: 0px; height: 400px; width: 500px; none"> 
<div class="rich-panelbar rich-panelbar-interior " id="j_id96" style="none"><div class="rich-panelbar-header " style=";">Leverage the whole set of JSF benefits while working with AJAX</div><div class="rich-panelbar-header-act " style=";;;;display: none;">Leverage the whole set of JSF benefits while working with AJAX</div><div class="rich-panelbar-content-exterior" style="display: none; width: 100%;"><table cellpadding="0" cellspacing="0" style="height: 100%;" width="100%"><tbody><tr><td class="rich-panelbar-content " style=";"> 

Ajax4jsf is fully integrated into the JSF lifecycle. While other frameworks only 

give you access to the managed bean facility, Ajax4jsf advantages the action and value 

change listeners as well as invokes server-side validators and converters during the 

AJAX request-response cycle.</td></tr></tbody></table></div></div> 
</div> 
</body> 
</html>

Nguồn

2013-04-06 c12

Vui lòng chỉ đăng mã CSS. Tôi không hiểu lý do tại sao hiển thị: không có gì không hoạt động. Sử dụng công cụ chọn cụ thể hơn? –

@ExplosionPills đăng css/html – c12

width: 0; height: 0;

hoặc

visibility: hidden;

hoặc

opacity: 0;

hoặc

position: absolute; top: -9999px; left: -9999px;

hoặc chỉ

Nguồn

2013-04-06 20:48:25 Kaloyan

Lưu ý về khả năng truy cập: trình đọc màn hình sẽ bỏ qua các phần tử được ẩn với 'display: none' và' visibility: hidden' (đó là ý định tốt) nhưng vẫn đọc những vị trí ngoài khung nhìn (thông qua tiêu cực văn bản thụt lề hoặc trái/phải dịch). Tôi nghĩ một trình đọc màn hình (là VoiceOver?) Sẽ bỏ qua các phần tử có 'height: 0' nhưng một số khác thì không. Vì vậy, hãy cẩn thận rằng một số người dùng sẽ vẫn cảm nhận được nội dung ẩn của bạn (không phải như vậy) trong khi bạn có thể nghĩ. * Định vị ra khỏi khung nhìn * thường được gọi là 'ẩn giấu trong khung CSS và mẫu CMS để diễn tả điều này. – FelipeAls

Liên quan: KHÔNG sử dụng 'top: -9999px' vì nó có thể làm cho hình ảnh nhảy lên đầu trang và quay lại vị trí trước đó cho những người sử dụng bàn phím để điều hướng trong nội dung của bạn. 'left: -9999px' (hoặc phải trong ngôn ngữ RTL) là tốt vì nó sẽ không di chuyển vị trí cuộn theo chiều dọc và nó đủ. Điều này liên quan đến yếu tố có thể tập trung (liên kết, yếu tố hình thức cơ bản) nhưng khi poperty trái là đủ, tốt hơn tránh đầu hoàn toàn – FelipeAls

Vài năm sau này có vẻ là một thay thế thú vị quá: 'line-height: 0; overflow: hidden; padding: 0; lề: 0' –

Tôi cho rằng visibility:hidden; sẽ giúp bạn. :)

Nguồn

2013-04-06 20:48:12 FeRtoll

Sử dụng quan trọng để ngăn chặn nó bị ghi đè -

.rich-panelbar-header-act { 
    display:none !important; 
}

Ngoài ra bạn có thể sử dụng JavaScript như một sao lưu -

function hidediv() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('DIVIDNAME').style.display = 'none'; 
}else { 
if (document.layers) { // Netscape 4 
document.DIVIDNAME.display = 'hidden'; 
}else { // IE 4 
document.all.DIVIDNAME.style.display = 'none'; 
}}} 
</script>

Nguồn

2013-04-06 20:48:28 Vector

này làm việc cho tôi ..

!important có thể' t được sử dụng trong phiên bản amp thay vì display:none; sử dụng:

position: absolute; top: -9999px; left: -9999px;

Nguồn

2017-06-28 10:27:45

CSS Các lựa chọn thay thế cho style = "display: none"

Trả lời

Các vấn đề liên quan