Tôi có một html đơn giản, nơi tôi muốn có một mục flex trong một màn hình hiển thị bảng, để phát triển trên di chuột. Tôi cũng muốn nó chuyển sang trạng thái phát triển, để có trải nghiệm người dùng mượt mà.Làm thế nào để làm cho flexbox, chuyển tiếp và IE10 làm việc cùng nhau?
Tôi đã làm cho nó hoạt động trong Chrome. Flex phát triển cũng hoạt động trong IE, nhưng quá trình chuyển đổi thì không. Tôi đã kiểm tra ba lần, và chuyển tiếp được hỗ trợ trong IE10, vì vậy tôi rõ ràng đang làm điều gì đó sai trái. Tôi đã thử nghiên cứu tất cả bốn thuộc tính có thể để chuyển đổi, nhưng mọi thứ dường như là như vậy. Tôi không thể tìm thấy bất kỳ điều gì trong tài liệu mâu thuẫn với thiết lập của riêng tôi.
Đây là fiddle của riêng tôi: https://jsfiddle.net/3vrp7xyo/3/ Đây là fiddle từ một câu trả lời cho một câu hỏi ở đây, cho thấy cùng một vấn đề chính xác: http://codepen.io/DrYSG/pen/ovctn (chỉ cần loại bỏ các dấu gạch chéo trong js-tab, để làm cho nó làm việc)
UPDATE: fiddle mới cho thấy hiệu ứng chuyển tiếp làm việc một cách hoàn hảo trong cả hai trình duyệt, ngoài flexbox: https://jsfiddle.net/3vrp7xyo/9/
Note rằng quá trình chuyển đổi màu gradient thực sự hoạt động trong cả hai trình duyệt, nhưng nuôi ngang/co không
Đây là mã của tôi:
.day-row>div {
line-height: 18px;
text-align: center;
margin: -2px -1px;
border: 2px solid black;
font-size: 11px;
color: black;
}
.day-row>div:first-child {
margin-left: -2px;
}
.day-row>div:last-child {
margin-right: -2px;
}
.day-row {
background-color: #CCDFE0;
margin: -2px;
border: 2px solid black;
background-color: white;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.releasecalendar-container {
margin: 0 auto;
padding: 25px;
max-width: 1500px;
}
.month-column {
padding: 0;
margin: -2px -1px;
border: 2px solid black;
}
.day-sunday>.weekday-name-column,
.day-sunday>.date-column {
background-color: #F44336;
color: white;
}
.event {
flex: 1;
overflow: hidden;
white-space: nowrap;
text-align: center;
cursor: pointer;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-webkit-transition: all 0.2s;
color: white;
font-weight: bold;
}
.event:hover {
flex: 10;
}
.weekday-name-column,
.date-column {
width: 22px;
}
.FZ {
background-color: #0098c3;
}
.FZ:hover {
color: #0098c3;
background-color: #11caff;
}
.H {
color: black;
background-color: #FFF;
}
.H:hover {
background-color: #BBB;
}<div class="month-column">
<div class="day-row" id="day-1-2016" data-year="2016" data-month="0" data-day="1">
<div class="weekday-name-column">Fr</div>
<div class="date-column">01</div>
<div class="event FZ 1 2 3 4"><span>Event 1</span></div>
<div class="event H 1 2 3 4"><span>Event 2</span></div>
</div>
<div class="day-row" id="day-1-2016" data-year="2016" data-month="0" data-day="1">
<div class="weekday-name-column">Sa</div>
<div class="date-column">02</div>
<div class="event FZ 1 2 3 4"><span>Event 1</span></div>
<div class="event H 1 2 3 4"><span>Event 2</span></div>
<div class="event H 1 2 3 4"><span>Event 3</span></div>
</div>
</div>UPDATE: tôi thấy this page for auto-prefixing my CSS-code, nhưng ngay cả sau khi tạo ra tất cả các tiền tố có thể thiếu, nó đã không làm gì để thay đổi giao diện người dùng của tôi .
Đây là câu trả lời hay. Nó không phải là một trong những tôi đã hy vọng, nhưng nếu không ai đăng một cách làm việc xung quanh này, tôi sẽ rất vui khi chấp nhận câu trả lời này. Tôi đã học được một cái gì đó mới ở đây :). – KjetilNordin
đã cập nhật câu trả lời với giải pháp có thể –
Tôi thích nó! Nó thậm chí còn tốt hơn so với giải pháp flex, vì mặt hàng lơ lửng sẽ chiếm 80% không gian, cho dù có bao nhiêu mục! Công việc tuyệt vời và cảm ơn bạn rất nhiều! – KjetilNordin