我正在重新设计一段非常古老的代码，这是一个日历（请记住我想用html和css修复它）以下代码片段运行良好但是接口在Ipad中断，所以我将以下代码更改为第二个片段接口在ipad中很好，但它不起作用。
.dhx_cal_today_button{
background-color: #e1e1e1;
background-position:-30px 0;
width:50px;
height:17px;
left:21px;
display: inline-block;
cursor:pointer;
text-align:center;
color: gray;
}
.dhx_cal_prev_button {
background-position: 0 0;
cursor: pointer;
height: 17px;
left: 0px;
width: 29px;
}
.dhx_cal_next_button {
background-position: -60px 0;
cursor: pointer;
height: 17px;
left: 75px;
width: 29px;
}<div class="dhx_cal_prev_button buttonGroup">
<button><</button>
</div>
<div class="dhx_cal_today_button buttonGroup">
<button >Today</button>
</div>
<div class="dhx_cal_next_button buttonGroup">
<button >></button>
</div>
第二段代码：
.buttons {
float: left;
padding-bottom: 20px;
clear: both;
}
a.button {
color: #6e6e6e;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 5px 10px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 #fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #f3f3f3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
border: solid 1px #dcdcdc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin-right: 0px;
}
a.button:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
a.button:active {
color: #000;
border-color: #444;
}
a.left {
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
border-bottom-right-radius: 0;
margin: 0;
}
a.middle {
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-left: solid 1px #f3f3f3;
margin: 0;
border-left: solid 1px rgba(255, 255, 255, 0);
}
a.middle:hover,
a.right:hover { border-left: solid 1px #999 }
a.right {
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0;
border-left: solid 1px #f3f3f3;
border-left: solid 1px rgba(255, 255, 255, 0);
}
a.Today {
width: 25px;
font-size: 12px;
padding:0px 0px;
margin:0;
}
a.prev {
width: 5px;
font-size: 12px;
}
a.next {
width: 5px;
font-size: 12px;
}<a href="#" class="dhx_cal_prev_button button left prev">< </a>
<a href="#" class="dhx_cal_today_button button middle today">Today </a>
<a href="#" class="dhx_cal_next_button button right next">> </a>
我的理解是当我使用div它的工作，但界面有问题，当我使用它已经破碎！ （我不能使用bootstrap，它是用Php编写的。）
EDIT: This is JS.
// ----- Configure the dhtmlxScheduler options here -----
this.scheduler.config.xml_date = "%Y-%m-%d %H:%i:%s"; // Format of dates loaded from server via json
this.scheduler.config.date_step = "5";
this.scheduler.config.first_hour = 7;
//this.scheduler.config.last_hour = 24; // {numeric} hour from which day and week scales start
this.scheduler.config.hour_size_px = 50;
this.scheduler.config.scroll_hour = 7;
this.scheduler.config.multi_day = true; // {numeric} hour from which day and week scales end.
this.scheduler.config.readonly = false;
this.scheduler.config.default_date = "%l %j %M %Y";
this.scheduler.config.cascade_event_display = true; // to enable cascade rendering
this.scheduler.config.cascade_event_count = 10; // how many levels (maximum) should be used
this.scheduler.config.cascade_event_margin = 30; // margin in px between levels
// Turn editing features off
this.scheduler.config.drag_resize = false; // - {boolean} allows resizing events by dnd;
this.scheduler.config.drag_move = false; // - {boolean} allows moving events by dnd;
this.scheduler.config.drag_create = false; // - {boolean} allows creating new events by dnd;
this.scheduler.config.dblclick_create = false; // - {boolean} allows creating new events by double click;
this.scheduler.config.edit_on_create = false; // - {boolean} shows form on new event creation;
this.scheduler.config.details_on_create = false; // - {boolean} uses extended form on new event creation by drag or by dbl-click (option doesn't affect monthly view - where details form is the only way to change data);
this.scheduler.config.details_on_dblclick = false;
//this.scheduler.xy.menu_width = 0;
this.scheduler.config.full_day = true;
// this.scheduler.keys.edit_save = 13;
if (this.allowTimeChange) {
// Default is read only unless this.allowTimeChange is true
this.scheduler.config.drag_resize = true; // - {boolean} allows resizing events by dnd;
this.scheduler.config.drag_move = true; // - {boolean} allows moving events by dnd;
this.scheduler.attachEvent("onClick", function(){return true;});
this.scheduler.attachEvent("onBeforeDrag", function(){return true;});
this.scheduler.config.icons_edit=["icon_save"];
this.scheduler.config.icons_select=["icon_save"];
}
else {
// Disable clicks and drags
this.scheduler.attachEvent("onClick",function(){return false;});
this.scheduler.attachEvent("onBeforeDrag",function(){return false;});
}
if (this.allowCreateEvents) {
this.scheduler.config.drag_create = true; // - {boolean} allows creating new events by dnd;
this.scheduler.config.dblclick_create = true; // - {boolean} allows creating new events by double click;
this.scheduler.config.edit_on_create = true; // - {boolean} shows form on new event creation;
}
this.scheduler.config.show_loading = true;
this.overrideConfig(); /* allow final tweaking of config from calling screen */
this.scheduler.init('scheduler_here', new Date(), "month" /* is.weekMode */);
this.scheduler.setLoadMode(this.loadMode);
// this.scheduler.load(this.url, this.data_type);
if (this.refreshOnInit) {
this.refresh();
}
}
非常感谢提前。