css V6：响应式修复+交叉表修复
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css V6：响应式修复+交叉表修复相关的知识，希望对你有一定的参考价值。
@font-face {
font-family: 'ProximaNova';
src: url('../fonts/proximanova-light.eot');
src: url('../fonts/proximanova-light.eot?#iefix') format('embedded-opentype'), url('../fonts/proximanova-light.woff') format('woff'), url('../fonts/proximanova-light.ttf') format('truetype'), url('../fonts/proximanova-light.svg#ProximaNova-Light') format('svg');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'ProximaNova';
src: url('../fonts/proximanova-regular.eot');
src: url('../fonts/proximanova-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/proximanova-regular.woff') format('woff'), url('../fonts/proximanova-regular.ttf') format('truetype'), url('../fonts/proximanova-regular.svg#ProximaNova-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ProximaNova';
src: url('../fonts/proximanova-bold.eot');
src: url('../fonts/proximanova-bold.eot?#iefix') format('embedded-opentype'), url('../fonts/proximanova-bold.woff') format('woff'), url('../fonts/proximanova-bold.ttf') format('truetype'), url('../fonts/proximanova-bold.svg#ProximaNova-Bold') format('svg');
font-weight: 700;
font-style: normal;
}
body {
font-family: 'ProximaNova', Arial, Helvetica
}
/*
* Row with equal height columns
* --------------------------------------------------
*/
.row-flex, .row-flex > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
.row-flex-wrap {
-webkit-flex-flow: row wrap;
align-content: flex-start;
flex:0;
}
.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
margin:-.2px; /* hack adjust for wrapping */
}
.container-flex > div[class*='col-'] > div,.row-flex > div[class*='col-'] > div {
width:100%;
}
.flex-col {
display: flex;
display: -webkit-flex;
flex: 1 100%;
flex-flow: column nowrap;
}
.flex-grow {
display: flex;
-webkit-flex: 2;
flex: 2;
}
body {
background-image: url('../images/pattern.png');
}
.col_content {
background-color: #F3F3F3;
padding: 20px;
height: 100%;
border-top: 7px solid #eaeaea;
}
.container.main_wrap {
margin-top: 30px;
padding: 30px;
background-color: white;
padding-bottom: 0;
}
.col_content h2 {
margin-top: 0;
color: #c03e3e;
font-weight: bold;
font-size: 22px;
}
.container.main_wrap > .row {
/* margin-bottom: 30px; */
}
.col_content.intro {
border: 0;
background: none;
padding: 0;
margin-bottom: 30px;
}
.col_content.intro.intro_center {
text-align: center;
}
.row .col_wrap {
padding-bottom: 30px;
}
.col_content.intro.intro_center h2 {
font-size: 26px;
margin-top: 10px;
}
.type_map {
text-align: center;
}
h3 {
font-weight: bold;
margin: 0;
color: #c03e3e;
font-size: 22px;
}
.type_map p {
margin-top: 5px;
}
.type_map iframe {
border: 5px solid white !important;
}
.type_image > .col_content {
text-align: center;
display: table;
}
.type_image > .col_content img {
max-width: 100%;
/* vertical-align: middle; */
/* display: table-cell; */
}
/*.type_image > .col_content > .image_v_middle {
vertical-align: middle;
display: table-cell;
}*/
.type_table .table>thead>tr>th,
.type_table .table>tbody>tr>th,
.type_table .table>tfoot>tr>th,
.type_table .table>thead>tr>td,
.type_table .table>tbody>tr>td,
.type_table .table>tfoot>tr>td {
padding: 5px;
/* background-color: white; */
}
.type_table .table>thead>tr>th,
.type_table .table>tbody>tr>th {
background-color: #e2e2e2;
}
.type_table h3 {
text-align: center;
margin-bottom: 20px;
}
.container.header img {
max-width: 170px;
float: left;
margin-right: 20px;
}
.container.header h1 {
display: inline-block;
margin-top: 8px;
font-weight: bold;
color: #c03e3e;
font-size: 30px;
}
.container.header {
margin-top: 30px;
}
.container.footer img {
max-width: 100px;
}
.container.footer .alignright {
text-align: right;
}
.container.footer {
margin-top: 20px;
margin-bottom: 30px;
}
a {
color: #c03e3e;
}
.MacFirefox .type_image > .col_content img {
width: 100%; max-width: -moz-max-content;
}
.MacSafari .row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
margin:-.3px; /* hack adjust for wrapping */
}
.MacSafari .type_image > .col_content {
display: block;
}
.MacSafari .type_image > .col_content > .image_v_middle {
display: block;
}
/*.WindowsMozilla .type_image > .col_content img {
width: 100%;
}*/
.WindowsMozilla .type_image > .col_content {
display: block;
}
.MacSafari .col_content {
height: auto;
}
.row-flex > div:only-child {
display: block;
flex: none;
}
h3 {
margin-bottom: 20px;
text-align: center;
}
.close {
display: block;
position: absolute;
background-color: white;
border: 1px solid #a7a7a7;
width: 30px;
height: 30px;
border-radius: 50%;
font-weight: lighter;
font-size: 19px;
opacity: 1;
color: #a7a7a7;
line-height: 23px;
top: -8px;
right: 6px;
text-align: center;
display:none;
}
.close:focus, .close:hover {
opacity: 1;
color: rgba(255, 255, 255, 0.44);
background: #cecece;
border-color: #cecece;
}
.g_map_container {
height: 350px;
border: 5px solid white !important;
}
.recordslist_table {
table-layout: auto;
}
/*Crosstab preview*/
.scrolling td {
vertical-align: top;
padding: 10px;
min-width: 100px;
}
.outer {
position: relative;
background-color: #eeeeee;
width: 100% !important;
overflow: hidden;
}
.inner {
background-color: #fff;
overflow-x: auto;
overflow-y: visible;
margin-left: 115px;
width: 100% !important;
}
.th_first {
position: absolute;
left: 0;
width: 120px;
}
@-moz-document url-prefix() {
.th_first {
position: absolute;
left: 0;
width: 120px;
margin-top: -1px;
}
}
.cross_table {
table-layout: auto;
}
.main-map-legend{
border: 1px solid lightgray;
background-color:white;
width:100px;
-webkit-border-radius: 10px;
border-radius: 10px;
font-size:13px;
}
@media print {
.close {
display:none;
}
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
}
/*
88 ad888888b, ,a8888a, ,a8888a,
,d88 d8" "88 ,8P"' `"Y8, ,8P"' `"Y8,
888888 a8P ,8P Y8, ,8P Y8,
88 ,d8P" 88 88 88 88
88 a8P" 88 88 88 88
88 a8P' `8b d8' `8b d8'
88 d8" `8ba, ,ad8' `8ba, ,ad8'
88 88888888888 "Y8888P" "Y8888P"
*/
@media (max-width: 1200px) {
}
/*
ad88888ba ad88888ba 88
d8" "88 d8" "88 ,d88
8P 88 8P 88 888888
Y8, ,d88 Y8, ,d88 88
"PPPPPP"88 "PPPPPP"88 88
8P 8P 88
8b, a8P 8b, a8P 88
`"Y8888P' `"Y8888P' 88
*/
@media (max-width: 991px) {
}
/*
888888888888 ad8888ba, 888888888888
,8P' 8P' "Y8 ,8P'
d8" d8 d8"
,8P' 88,dd888bb, ,8P'
d8" 88P' `8b d8"
,8P' 88 d8 ,8P'
d8" 88a a8P d8"
8P' "Y88888P" 8P'
*/
@media (max-width: 767px) {
.row-flex, .row-flex > div[class*='col-'] {
display: block !important;
flex: none !important;
}
.row-flex-wrap {
-webkit-flex-flow: none !important;
align-content: none !important;
flex:0;
}
.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
margin:0px; /* hack adjust for wrapping */
}
.container-flex > div[class*='col-'] > div,.row-flex > div[class*='col-'] > div {
width:100%;
}
.flex-col {
display: block !important;
}
.flex-grow {
display: block !important;
}
.container.main_wrap {
margin-top: 0;
padding: 10px;
}
.row .col_wrap {
padding-bottom: 10px;
}
.container.footer {
text-align: center;
}
.container.footer .alignright {
margin-top: 20px;
text-align: center;
}
}以上是关于css V6：响应式修复+交叉表修复的主要内容，如果未能解决你的问题，请参考以下文章