Question

我对css很新，我现在正在做实习生。我已被分配任务从Chrome获取网站的css并使其在IE中看起来类似，然后使其响应和可扩展。所以基本上如果我让窗口变小，我希望一切都保持不变，只是为了更小，然后当我再次变大时，文本变得更大。我已经完成了对IE的转换，但我找到的示例在Chrome和FF中运行，但不是在IE中。

关于我开始制作这个的任何想法？

html, body {
background: none repeat scroll 0 0 #8FAE9F;
font-family: Trebuchet MS;
font-size: 27px;
font-weight: bold;
height: 99%;
margin: 0 auto;
padding: 0;
text-align: center;
}
.column.OBJ0, .column.OBJ1 {
max-width: 12.0em;
margin-right: -1.2em;
margin-left: -1.2em;
}
.blueBorder, .thresholds {
margin: 0;
padding: 5px;
width: 98%;
}
.thresholds {
display: inline;
float: left;
}
.Threshold_NONE {
color: black;
}
.Threshold_INFO {
color: green;
}
.Threshold_WARNING {
color: yellow;
}
.Threshold_ALERT {
color: red;
}
.Threshold_INFO, .Threshold_WARNING, .Threshold_ALERT, .Threshold_NONE {
font-size: 5em;
}
.displayText {
}
.column {
display: inline-block;
float: left;
margin: 0;
padding: 0;
text-align: center;
vertical-align: text-top;
line-height: normal;
white-space: nowrap;
}
.header {
color: black;
font-size: 3em;
margin-left: -4px;
margin-right: -4px;
margin-top: -4px;
max-height: 1em;
}
.columnwrapper {
min-width: 378px;
text-align: center;
white-space: nowrap;
width: 25%;
}
.displayAgent {
}
.displayAgent img {
float: left;
margin-bottom: auto;
margin-right: 0.5em;
margin-top: auto;
}
.displayAgent1 {
}
.displayAgent2 {
background-color: #E6E6E6;
}
.displayAgentName {
display: table;
text-align: right;
}
.displayAgentStatusImg {
padding-left: 0.5em;
}
.displayAgentStatus {
display: inline;
width: 71px;
}
.displayAgentStateTime {
display: inline;
width: 61px;
}
.displayAgentStatus_LoggedIn {
}
.displayAgentStatus_NotReady {    
}
.displayAgentStatus_Ready {
}
.displayAgentStatus_Reserved {
}
.displayAgentStatus_LoggedOut {
}
.displayAgentStatus_Talking {
}
.displayAgentStatus_Working {
}
div .displayAgentStateTime {
display: none;
}
div .displayAgentStatus {
display: none;
}
.PoweredBy {
bottom: 10px;
display: none;
font-size: 0.8em;
padding: 5px;
position: fixed;
right: 10px;
}
.lastupdate {
background: none repeat scroll 0 0 white;
display: table;
font-size: 1.2em;
margin-top: 0;
width: 7em;
}
.viewerDisplayItemErrorPanel {
color: red;
font-weight: bold;
}
.headline.remedyItem {
font-weight: bold;
}
.remedyItem span {
display: inline-block;
font-size: 1em;
max-height: 1.2em;
overflow: hidden;
}
div.headline.remedyItem {
text-align: center;
border-bottom: 4px solid;
}
span.remedyId {
width: 6em;
}
span.remedyCustomer {
width: 6em;
}
span.remedyPriority {
width: 2em;
}
span.remedyCaseTitle {
text-align: left;
width: 17em;
}
span.remedySLA {
width: 5em;
}
span.remedySubSlaType {
display: none;
}
span.remedyHidden {
}
span.remedyShowSLA {
width: 4em;
}
span.remedyGroup {
width: 6em;
}
div.column.Remedy {
clear: left;
margin-top: 0.5em;
}
div.column.Remedy h2 {
display: none;
}
div.uccx_exchange_user span.exchangeStatus {
display: none;
}
div.uccx_exchange_user span.uccxStatus {
display: none;
}

div.uccx_exchange_user span.user {
display: inline-block;
font-size: 1em;
width: 3.9em;
}
div.uccx_exchange_user {
max-height: 0.92em;
}
div.uccx_exchange_user img {
margin-top: 0.2em;
padding: 0;
}
.viewerDisplayItemShowPanel.øst {
clear: right;
float: right;
text-align: left;
}
.viewerDisplayItemShowPanel.vest {
clear: left;
float: left;
text-align: right;
margin-left: 1.5em;
}
.viewerDisplayItemShowPanel.øst div img {
float: center;
margin-left: -5.6em;
margin-right: 0.0em;
}
.viewerDisplayItemShowPanel.vest div img {
float: center;
margin-left: -0.8em;
margin-right: 0.1em;
}

.column h2.header {
font-size: 2.0em;
margin: 0;
}
.headline.remedyItem .remedyPriority {
background: none repeat scroll 0 0 red;
display: none;
}
.headline.remedyItem .remedyCustomer {
margin-right: 3em;
}
span.NOT_SET {
color: white;
}
div.FIX_AT_NONE .remedyId {
color: yellow;
}
span.NORMAL_ALERT, span.FIX_AT_ALERT {
color: red;
}
span.NORMAL_WARNING, span.FIX_AT_WARNING {
color: yellow;
}
span.NONE_WARNING, span.NONE_NONE {
color: blue;
}
span.NONE_ALERT {
color: purple;
}
.BURNED {
color: red;
}
.P1.remedyPriority {
background-color: red;
}
.P2.remedyPriority {
background-color: yellow;
}
span.RESPECTED {
color: green;
}
span.remedyUserLoginID {
display: none;
}
span.penaltyOn {
display: none;
}

Answer 1

您定位的是哪个版本的IE？

另外我假设你正在嵌套HTML标签，使用EM是基于父母的字体大小而不是身体，也许尝试使用REM代替？

我建议您阅读：http://css-tricks.com/confused-rem-em/

你也可以发布你的HTML吗？

Answer 2

你的问题有两个问题，一个是使IE兼容，第二个是使它具有响应性。

对于响应部分，如您所提到的看起来您只想制作更小的内容，您可以在％中定义样式，但这不会被称为响应式网站，因为everthing只是缩放，不可读或用户 - 友好。

另一方面，响应意味着通过使用媒体查询来更改布局，同时使用户可以轻松读取所有内容，并将悬停事件转换为触摸事件，以便在触摸屏设备上也可以访问。

如果您能清除您的要求，那就太好了。如果你只是需要适合的东西，那么坚持使用％s或尝试媒体查询以使其完全响应:)

试图让我的网站成为回应

2 个答案: