gpt4 book ai didi

html - 缩放错误不会出现在 Internet Explorer 中,但会出现在我测试过的所有其他浏览器中

转载 作者:行者123 更新时间:2023-11-28 11:22:10 25 4
gpt4 key购买 nike

在检查我学院网站上的其他内容时,它注意到放大和缩小我们网站的页面会使标题和某些缩放级别的主要内容之间出现一个小间隙。我们主要测试 IE 兼容性,因为这是我们大多数访问者使用的,当我在 IE 9 中放大和缩小时,差距永远不会出现。在当前版本的 Firefox、Chrome、Safari 和 Opera 中,同样会出现“移动”错误。这不是一个非常严重的错误,因为它不会太严重地影响网站的可读性,但如果可能的话,我想消除它。

我已经尝试过的:

  • 使看起来移动的“内容”固定宽度
  • 给“内容”一个固定的位置给里面的“内容”、“ Canvas ”一个固定的位置
  • 分别更改“content”和“canvas”的 z-index
  • 未设置页眉位置
  • 删除“ct100_header”和“content”之间的“clear”类(这只会使错误更加严重)

网址:www.swic.edu

“sw_home.css”

/*============================================================*/
/*==================== Left Column ==========*/

/*==================================================*/
/*========== Ads ==========*/

.ad-content
{
text-align: center;
margin: 20px 0;
padding: 0;
}

.ad-content p
{
text-align:right;
padding-right:15px;
margin-top: -4px;
}

.ad-content img
{
padding: 5px;
background: #fff;
border: 1px solid #417ec1; /* light blue */
width: 180px;
}

.ad-content img:hover, .ad_content img:active
{
border: 1px solid #c2b535; /* light yellow */
}

/*//////////////////// Ads //////////*/

/*////////// Ads //////////*/
/*//////////////////////////////////////////////////*/

/*///////////////////// Left Column //////////*/
/*////////////////////////////////////////////////////////////*/

/*============================================================*/
/*==================== Main Column ==========*/

/*==================================================*/
/*========== Top Row ==========*/

/*////////// Top Row //////////*/
/*//////////////////////////////////////////////////*/

/*==================================================*/
/*========== Announcements ==========*/

.announcements-wrapper
{
margin-top: -4px;
position: relative;
z-index: 1;
}

.announcements-wrapper .announcement
{

}

.announcements-wrapper .announcement-last
{
margin-bottom: 16px;
}

.announcements-wrapper h2
{
font-size: 18px;
border-width: 0px 0px 1px 0px;
border-color: #888;
border-style: solid;
color: #771425;
}

.announcements-wrapper p
{

}

.announcements-wrapper .multicol ul
{
margin-bottom: 0px!important;
}

.announcement-wrapper img
{

}


/*========================================*/
/*===== Count Down Timer =====*/

.countdown-box
{
/* --COMMENT OUT-- to DISPLAY; --UNCOMMENT-- to HIDE*/

/*display:none; visibility:hidden;*/

width: 100%;
border: 1px solid #888;
margin-bottom: 20px;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
behavior: url(/packages/PIE/PIE_uncompressed.htc);
}

.countdown-box a
{
color: #417ec1; /* light blue */
text-decoration: none;
font-weight: 700;
font-size: 12px;
}

.countdown-box .en-event-date
{
font-size: 16px !important;
font-weight: 700;
}

.countdown-box a:visited
{
color: #417ec1; /* light blue */
text-decoration: none;
}

.countdown-box a:hover
{
color: #b5a933; /* triad yellow; */
}

.countdown-box a:active
{
color: #b5a933; /* triad yellow; */
}



/* might need implementing in future */

/*////////// Announcements //////////*/
/*//////////////////////////////////////////////////*/

/*==================================================*/
/*========== Bottom Row ==========*/

/*========================================*/
/*===== Widgets =====*/

.widget
{
padding: 3px;
border: 1px solid #888;
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
-khtml-border-top-left-radius: 4px;
border-top-left-radius: 4px;
border-radius: 4px;
position: relative;
behavior: url(/packages/PIE/PIE_uncompressed.htc);

}

/*===== PollBox =====*/

.widget.poll p
{
border: 1px solid #888;
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
-khtml-border-top-left-radius: 4px;
border-top-left-radius: 4px;
border-radius: 4px;
position: relative;
behavior: url(/packages/PIE/PIE_uncompressed.htc);

background: #aaaaaa url(/css/images/widget-header-bg.png) 50% 50% repeat-x;
line-height: 30px;
font-size: 12px;
color: #193c69; /* dark blue */
text-align: center;
}

.widget.poll ol
{
margin-bottom: 20px;
left: 0;
}
.widget.poll ol li {
font-size: 11px;
line-height: 15px;
}
.widget.poll input[type=submit]
{
/*margin: 0 0 20px 50px;*/
}


/*===== Ektrons Reportchart.css overrides =====*/

/* /punch ektron in face */
.widget.poll table.tblreport *
{
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
color: #222;
font-family: Verdana, Sans-Serif;
line-height:20px;
font-size: 12px;
font-weight: normal;
}

.widget.poll table.tblreport
{
border-width: 0;
}

.widget.poll table.tblreport .headreport
{
padding: 0px 3px;
border: 1px solid #888;
background: #aaaaaa url(/css/images/widget-header-bg.png) 50% 50% repeat-x;
font-size: 12px;
height: 30px;
color: #193c69; /* dark blue */
vertical-align: middle;
text-align: center;
}

.widget.poll table.tblreport td
{
padding: 0 10px;
}

.widget.poll table.tblreport .resultbar
{
background: #005daa; /* swic blue; */
}

.widget.poll span.refreshlink
{
margin: 10px 0;
display: block;
}

.widget.poll a.refreshlink
{
color: #417ec1!important; /* light blue */
line-height:20px;
font-size: 12px;
float: right;
margin: -30px 0 0 0;
}

.widget.poll a.refreshlink:hover
{
color: #b5a933!important; /* triad yellow; */
}

/*///// Widgets /////*/
/*////////////////////////////////////////*/

/*////////// Bottom Row //////////*/
/*//////////////////////////////////////////////////*/

/*///////////////////// Main Column //////////*/
/*////////////////////////////////////////////////////////////*/


/*============================================================*/
/*==================== Footer Changes ==========*/

.footer p a
{
font-size: 10px;
}

/*///////////////////// Footer Changes //////////*/
/*////////////////////////////////////////////////////////////*/

“sw_layout.css”

/*////////////////////////////////////////////////////////////*/

/*============================================================*/
/*==================== Header Layout ==========*/

.header {
height: 140px;
position: relative;
z-index: 3;
}

/* because if i use a css3 gradient on the header, it causes z-index issues with the menu because its the relatively positioned object */
.header-bg-wrapper-1 {
width: 100%;
height: 100%;
background: #193c69;
background: -moz-linear-gradient(top, #193c69 0%, #005daa 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#193c69), color-stop(100%,#005daa));
background: -webkit-linear-gradient(top, #193c69 0%,#005daa 100%);
background: -o-linear-gradient(top, #193c69 0%,#005daa 100%);
background: -ms-linear-gradient(top, #193c69 0%,#005daa 100%);
background: linear-gradient(to bottom, #193c69 0%,#005daa 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#193c69', endColorstr='#005daa',GradientType=0 );
}

.header p {
color: #fff;
margin: 0;
padding: 0;
}

/*==================== Header Row Layout ==========*/
.header .row-1 {
width: 100%;
height: 100px;
}

.header .row-2 {
width: 100%;
height: 40px;
}

/*==================== Header Row 1 Content ==========*/
.header .swic-logo {
background-color: #fff;
margin: 10px auto;
padding: 2px 0px 5px 5px;
text-align: center;
width: 170px;
}

.header .swic-logo a img {
position: relative;
}

.header h1 {
font-size: 30px;
line-height: 75px;
font-family: Arial;
color: #fff;
margin: 10px 0px 0px -20px;
padding: 0px;
}

.header .header-links-wrapper {
float: right;
}

.header .header-links-wrapper a {
font-size: 14px;
color: #fff;
}

.header .header-links-wrapper a:hover, .header .header-links-wrapper a:active {
color: #DDB042;
}

.header .header-icons-wrapper {
float: right;
margin-top: 35px;
}

/*==================== Header Row 2 Content ==========*/

/* main menu */

.main-menu {
width: 100%;
height: 40px;
font-family: Arial;
}

.main-menu-bg-middle {
background: #111;
width: 100%;
position: absolute;
top: 100px;
left: 0;
height: 40px;
filter: alpha(opacity=85);
-moz-opacity: 0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
}

/* search box */
.header .search-wrapper {
position: relative;
height: 38px;
text-align: center;
}

.header .search-wrapper .search-box {
width: 150px;
height: 26px !important;
font-size: 15px;
line-height: 26px;
position: absolute;
right: 40px;
top: 1px;
padding: 0 5px;
margin: 5px 0 0 0;
background: url(http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif) #ffffff no-repeat left 50%;
border: 1px solid #bccdf0;
border-collapse: collapse;
}

.header .search-wrapper .search-box:focus {
background: #fff;
}

.header .search-wrapper .search-button {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
width: 40px;
height: 40px;
border: none;
background: transparent;
background-image: url('/images/layout/paw-button-angled-up.png');
background-repeat: no-repeat;
}

.header .search-wrapper .search-button:hover, .header .search-wrapper .search-button:focus {
background-image: url('/images/layout/paw-button-angled-down.png');
outline: none;
}

.header .search-wrapper .search-button:active {
background-image: url('/images/layout/paw-button-angled-down.png');
outline: none;
}

/*==================== Superfish Menu Styles ==========*/

.sf-menu {
margin: 0; padding: 0;
}
.sf-menu a {
padding: 10px 16px;
text-decoration:none;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #fff;
}

.sf-menu li li a
{
padding: 7px 10px;
}

.sf-menu li {
font-size: 17px;
line-height: 20px;
font-weight: bold;
margin: 0!important; padding: 0!important;
}

.sf-menu li ul{
margin-top: -3px;
background: #444; /* fixes IE7 background not behind li border problem */
width: 12em;
}

.sf-menu li li {
background: #444;
font-size: 15px;
font-weight: normal;
border-bottom: 1px dotted #555;
}
.sf-menu li li li {
background: #555;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #888;
color: #b71f38; /* triad red; */
text-decoration: none;
outline: 0;
}

/*//////////////////// Header Layout ==========*/
/*////////////////////////////////////////////////////////////*/

/*============================================================*/
/*==================== Content Layout ==========*/

/*==================== Wrappers ==========*/

.content {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
}

.canvas {
width: 960px;
position: relative;
margin: 0 auto;
padding: 16px 0;
}

/*==================== Content Title ==========*/

.content-header-wrapper
{
position: relative;
display: block;
width: 100%;
margin-bottom: 16px;
}

.breadcrumbs-wrapper
{
float: left;
width: 84%;
height: 20px;
font-size: 10px;
margin-bottom: 4px;
overflow: hidden; /* i want to truncate really long breadcrumbs */
}

.email-print-wrapper
{
width: 16%;
float: right;
text-align: right;
margin-bottom: 4px;
}

.page-title-wrapper
{
clear: both;
border-bottom: 3px double #777;
}

.page-title-wrapper h1
{
margin: 1px; /* fixes corner redraw glitches that pop up sparatically in some broswers as you scoll, ect */
padding: 4px 4px 4px 4px;
}

/*==================== Side Menu ==========*/

.side-menu-box
{
border: none;
background: none;
padding: 0 5px;
}

.side-menu-box h2
{
background: none;
padding: 0 5px;
color: #771425; /* medium red */
line-height:29px;
border-bottom: 1px solid #888;
margin-bottom: 10px;
font-size: 14px;
}

.side-menu-box ul
{
list-style-type: none;
margin: 0 0 10px 10px!important;
left: 0!important;

}
.side-menu-box ul li a
{
text-decoration: none;
}
.side-menu-box ul li a:hover
{
text-decoration: underline;
}

.ekflexmenu_accessible_menu_startlink, .ekflexmenu_accessible_menu_endlink, .ekflexmenu_accessible_menuitem_selected_message
{
display: none;
}

.ekflexmenu_accessible_menu_start
{
display: none;
}

.side-bar-bg-wrapper{
position: absolute;
top: 0px;
left: 10px;
height: 100%;
width: 220px;
background: #eee;
z-index: -1000;
}

.side-bar-bg-left
{
position: absolute;
top: 0px;
left: 0px;
width: 110px;
height: 100%;
z-index: -999;
background: #eee;
background: -moz-linear-gradient(left, rgba(221,221,221,1) 0%, rgba(238,238,238,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(221,221,221,1)), color-stop(100%,rgba(238,238,238,1)));
background: -webkit-linear-gradient(left, rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%);
background: -o-linear-gradient(left, rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%);
background: -ms-linear-gradient(left, rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%);
background: linear-gradient(left, rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#eeeeee',GradientType=1 );
}

.side-bar-bg-right
{
position: absolute;
top: 0px;
left: 120px;
width: 110px;
height: 100%;
z-index: -999;
background: #eee;
background: -moz-linear-gradient(left, rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1)));
background: -webkit-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%);
background: -o-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%);
background: -ms-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%);
background: linear-gradient(left, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=1 );
}

.ekflexmenu_accessible_menu_startlink, .ekflexmenu_accessible_menu_endlink, .ekflexmenu_accessible_menuitem_selected_message
{
display: none;
}

.ekflexmenu_accessible_menu_start
{
display: none;
}

/*//////////////////// Content Layout ==========*/
/*////////////////////////////////////////////////////////////*/

/*============================================================*/
/*==================== Footer Layout ==========*/

.footer {
position: relative;
width: 100%;
background: #005daa;
/*
background: -moz-linear-gradient(top, #005daa 0%, #193c69 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005daa), color-stop(100%,#193c69));
background: -webkit-linear-gradient(top, #005daa 0%,#193c69 100%);
background: -o-linear-gradient(top, #005daa 0%,#193c69 100%);
background: -ms-linear-gradient(top, #005daa 0%,#193c69 100%);
background: linear-gradient(to bottom, #005daa 0%,#193c69 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005daa', endColorstr='#193c69',GradientType=0 );
*/
}

.footer-bar-wrapper {
color: #fff;
font-size: 11px;
font-family: Arial, Sans-Serif;
margin: 0;
padding: 0;
width: 100%;
background: #005daa;
background: -moz-linear-gradient(top, #005daa 0%, #193c69 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005daa), color-stop(100%,#193c69));
background: -webkit-linear-gradient(top, #005daa 0%,#193c69 100%);
background: -o-linear-gradient(top, #005daa 0%,#193c69 100%);
background: -ms-linear-gradient(top, #005daa 0%,#193c69 100%);
background: linear-gradient(to bottom, #005daa 0%,#193c69 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005daa', endColorstr='#193c69',GradientType=0 );
}

.footer .footer-bar-wrapper p {
color: #fff;
font-size: 11px;
margin: 10px 0;
padding: 0;
}

.footer .footer-links a {
color: #fff;
}

.footer .footer-links a:hover {
color: #EAB73A;
}

.footer .copyright {
text-align: right;
}

.footer-campuses-wrapper {
padding-top: 10px;
/*color: #fff;*/
font-size: 11px;

background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(221,221,221,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(221,221,221,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 );
}

.footer-campuses-wrapper a:link,
.footer-campuses-wrapper a:visited {
color: #417ec1;
}

.footer-campuses-wrapper a:hover,
.footer-campuses-wrapper a:active {
color: #b5a933;
}

.footer-campuses-wrapper .container_12 {
/*
border-right: 2px solid #ddd;
border-left: 2px solid #ddd;
*/
}

.footer-campuses-wrapper .campus-inner-wrapper {
position: relative;
height: 100%;
width: 100%;
}

.footer-campuses-wrapper .campuses-divider{
/*
position: absolute;
top: 0px;
right: -10px;
height: 100%;
width: 0px;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
*/
}

.footer-campuses-wrapper h2,
.footer-campuses-wrapper address {
display: inline;
}

.footer-campuses-wrapper h2 {
font-size: 10px;
font-family: Verdana, sans-serif;
}

.footer-campuses-wrapper h2 a {
font-size: 10px;
}

.footer-campuses-wrapper address {
font-style: normal;
font-size: 10px;
}

.footer-campuses-wrapper .hlc-logo {
float: right;
height: 80px;
margin-bottom: 10px;
}

.footer-campuses-wrapper .google-map-link {
float: left;
margin-right: 20px;
}

.footer-campuses-wrapper .google-map-link img {
height: 60px;
width: 60px;
}

.footer-bottom-border {
height: 10px;
background: rgb(25,60,105); /* Old browsers */
background: -moz-linear-gradient(top, rgba(25,60,105,1) 0%, rgba(0,93,170,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(25,60,105,1)), color-stop(100%,rgba(0,93,170,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(25,60,105,1) 0%,rgba(0,93,170,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(25,60,105,1) 0%,rgba(0,93,170,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(25,60,105,1) 0%,rgba(0,93,170,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(25,60,105,1) 0%,rgba(0,93,170,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#193c69', endColorstr='#005daa',GradientType=0 ); /* IE6-9 */
}

/* site toggle button (mobile/desktop) */
.siteToggleButton{
margin-bottom: 0px;
padding-left: 5px;
}

/*//////////////////// Footer Layout ==========*/
/*////////////////////////////////////////////////////////////*/

最佳答案

看起来白色的间隙是菜单项换行。文字是白色的,所以您根本看不到他们在做什么。

将此样式添加到 sw_layout.css

.main-menu {
width: 100%;
height: 40px;
font-family: Arial;
overflow: hidden;
}

虽然这会让您指向/重新指向一个合理的方向,但以这种方式包装菜单项可能被认为是一种设计限制,内容管理者需要在其网站设计的限制内工作,或者设计应该改变以满足他们的需求。

如果你愿意,试试width: 101%;

关于html - 缩放错误不会出现在 Internet Explorer 中,但会出现在我测试过的所有其他浏览器中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21486378/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com