Đường ngang sử dụng HTML/CSS

Question

Tôi đang cố gắng để có được một đường ngang để làm việc trong trang blog của tôi, nhưng tôi gặp khó khăn trong việc hiển thị dòng trong google chrome (IE và Firefox hiển thị nó một cách hoàn hảo).

Về cơ bản, trong CSS của tôi, tôi có như sau:

div.hr { 
background: #fff no-repeat scroll center; 
margin-left: 15em; 
margin-right: 15em; 
width:50em; 
height:.05em; 
} 

div.hr hr { 
display: none; 
} 

Trong HTML của tôi, tôi có một cái gì đó như:

<div class="hr"><hr /></div> 

Đối với một số lý do, trong google chrome, dòng chỉ là không có ở đó. Vấn đề bây giờ là, tôi có rất nhiều trong số này (khoảng 25):

---

và do đó, tôi đang tìm cách sửa đổi chỉ CSS của tôi, để tôi có thể thực hiện các thay đổi tối thiểu cho HTML của mình.

Khi googling, tôi thấy rằng nhiều người đã có vấn đề này, nhưng có vẻ không phải là một giải pháp thích hợp (không xem xét "vẽ" một dòng và chèn dòng như là một pic!).

Tôi sẽ đánh giá cao nếu ai đó có thể chỉ cho tôi đúng hướng để giải quyết vấn đề trên.

Rất cám ơn.

Answer 1

Đây có thể là vấn đề của bạn:

height: .05em; 

Chrome là một chút funky với số thập phân, vì vậy hãy thử chiều cao cố định-pixel:

height: 2px; 

Answer 2

Hoặc thay đổi nó để height: 0.1em; Orso, kích thước tối thiểu của mọi thứ có thể hiển thị là 1px.

0,05 em bạn đang sử dụng có nghĩa là, có được kích thước phông chữ hiện tại tính bằng pixel của các phần tử này và cho tôi 5% của nó. Mà cho 12 pixel trở lại 0,6 điểm ảnh mà là quá ít để hiển thị. nếu bạn sẽ bật kích thước phông chữ của div để ít nhất 20pixels nó sẽ hiển thị tốt. Tôi cho rằng Chrome không làm tròn kích thước tối thiểu 1 pixel nơi các trình duyệt khác thực hiện.

Answer 3

Tôi đã thử mã này mới của tôi và nó có thể hữu ích đối với bạn, nó hoạt động hoàn hảo trong google chromr

hr { 
    color: #f00; 
    background: #f00; 
    width: 75%; 
    height: 5px; 
} 

Answer 4

bạn cũng có thể làm theo cách này, trong trường hợp của tôi, tôi sử dụng nó trước và sau khi một h1 (brute force it ehehehe)

.titleImage::before { 
content: "--------"; 
letter-spacing: -3px; 
} 

.titreImage::after { 
content: "--------"; 
letter-spacing: -3px; 
} 

Nếu khoảng cách giữa các chữ cái làm cho dòng chữ trong văn bản chỉ sử dụng lề để đẩy nó đi!