在更新了iOS10之后发现在通知部分出现了一些问题,原先的处理是:锁屏状态下接收到评论的推送通知之后滑动打开应用可以进入该评论对应的帖子内容。但在iOS10之下再做这个操作就只能进入应用,而无法定位到特定的某个页面。经过调查后发现是iOS10在更新推送通知后的适配问题,iOS10开始增加了UNUserNotificationCenter,并且推送通知的处理要在代理方法userNotificationCenter: didReceiveNotificationResponse(后台)和userNotificationCenter: willPresentNotification(前台)中进行处理。
iOS10推送新增了UserNotifications Framework,使用起来其实很简单。
只是在iOS10以上系统上点击通知栏,回调方法不再走原来的这两个方法
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo { } - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler { }
而是在前台的时候回调
- (void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler
从后台进入的时候回调
- (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)())completionHandler
下面总结一下处理方法:
1,导入头文件
<code class="hljs vala has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#import <UserNotifications/UserNotifications.h></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
2,定义一下判断系统版本的宏
<code class="hljs cs has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">define</span> IS_IOS7_OR_LATER ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0)</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">define</span> IS_IOS8_OR_LATER ([[[UIDevice currentDevice] systemVersion] floatValue] >= 8.0)</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#<span class="hljs-keyword" style="box-sizing: border-box;">define</span> IS_IOS10_OR_LATER ([[[UIDevice currentDevice] systemVersion] floatValue] >= 10.0)</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>
3,遵守UNUserNotificationCenterDelegate代理
appDelegate.m:
<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@interface</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">AppDelegate</span> ()<<span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">UNUserNotificationCenterDelegate</span>></span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@end</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>
并且在application: didFinishLaunchingWithOptions方法中注册一下推送通知。
<code class="hljs objectivec has-numbering" style="background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block; padding: 0px; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span style="background-color: transparent; color: inherit;"> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (IS_IOS10_OR_LATER) { <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//IOS10 之后采用UNUserNotificationCenter注册通知</span> UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter]; </span><span style="color:#ff0000;background-color: rgb(255, 255, 102);"> center<span class="hljs-variable" style="box-sizing: border-box;">.delegate</span> = <span class="hljs-keyword" style="box-sizing: border-box;">self</span>; </span><span style="color:rgba(0, 0, 0, 0);background-color: transparent;"> [center requestAuthorizationWithOptions:(UNAuthorizationOptionBadge | UNAuthorizationOptionSound | UNAuthorizationOptionAlert) completionHandler:^(</span><span class="hljs-built_in" style="background-color: transparent; color: rgb(102, 0, 102); box-sizing: border-box;">BOOL</span><span style="color:rgba(0, 0, 0, 0);background-color: transparent;"> granted, </span><span class="hljs-built_in" style="background-color: transparent; color: rgb(102, 0, 102); box-sizing: border-box;">NSError</span><span style="color:rgba(0, 0, 0, 0);background-color: transparent;"> * _Nullable error) { </span><span class="hljs-keyword" style="background-color: transparent; color: rgb(0, 0, 136); box-sizing: border-box;">if</span><span style="color:rgba(0, 0, 0, 0);background-color: transparent;"> (!error) { [[</span><span class="hljs-built_in" style="background-color: transparent; color: rgb(102, 0, 102); box-sizing: border-box;">UIApplication</span><span style="color:rgba(0, 0, 0, 0);background-color: transparent;"> sharedApplication] registerForRemoteNotifications]; </span><span class="hljs-built_in" style="background-color: transparent; color: rgb(102, 0, 102); box-sizing: border-box;">NSLog</span><span style="color:rgba(0, 0, 0, 0);background-color: transparent;">(@</span><span class="hljs-string" style="background-color: transparent; color: rgb(0, 136, 0); box-sizing: border-box;">"succeeded!"</span><span style="color:rgba(0, 0, 0, 0);background-color: transparent;">); } }]; }</span><span class="hljs-keyword" style="background-color: transparent; color: rgb(0, 0, 136); box-sizing: border-box;">else</span><span style="color:rgba(0, 0, 0, 0);background-color: transparent;">{ </span><span class="hljs-comment" style="background-color: transparent; color: rgb(136, 0, 0); box-sizing: border-box;">//IOS10 之前注册通知</span><span style="color:rgba(0, 0, 0, 0);background-color: transparent;"> </span><span class="hljs-keyword" style="background-color: transparent; color: rgb(0, 0, 136); box-sizing: border-box;">if</span><span style="color:rgba(0, 0, 0, 0);background-color: transparent;"> ([[</span><span class="hljs-built_in" style="background-color: transparent; color: rgb(102, 0, 102); box-sizing: border-box;">UIApplication</span><span style="color:rgba(0, 0, 0, 0);background-color: transparent;"> sharedApplication] respondsToSelector:</span><span class="hljs-keyword" style="background-color: transparent; color: rgb(0, 0, 136); box-sizing: border-box;">@selector</span><span style="color:rgba(0, 0, 0, 0);background-color: transparent;">(registerUserNotificationSettings:)]) { UIUserNotificationSettings *settings = [UIUserNotificationSettings settingsForTypes:(UIUserNotificationTypeBadge |UIUserNotificationTypeSound |UIUserNotificationTypeAlert) categories:</span><span class="hljs-literal" style="background-color: transparent; color: rgb(0, 102, 102); box-sizing: border-box;">nil</span><span style="color:rgba(0, 0, 0, 0);background-color: transparent;">]; [[</span><span class="hljs-built_in" style="background-color: transparent; color: rgb(102, 0, 102); box-sizing: border-box;">UIApplication</span><span style="color:rgba(0, 0, 0, 0);background-color: transparent;"> sharedApplication] registerUserNotificationSettings:settings]; [[</span><span class="hljs-built_in" style="background-color: transparent; color: rgb(102, 0, 102); box-sizing: border-box;">UIApplication</span><span style="color:rgba(0, 0, 0, 0);background-color: transparent;"> sharedApplication] registerForRemoteNotifications]; } }</span></code><ul class="pre-numbering" style="background-color: rgb(238, 238, 238); color: rgb(51, 51, 51); box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul><ul class="pre-numbering" style="background-color: rgb(238, 238, 238); color: rgb(51, 51, 51); box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul>
4,实现接收推送消息的回调方法,iOS10之前使用application: didReceiveRemoteNotification 来进行回调处理,而在iOS10里则要实现UNUserNotificationCenterDelegate的两个代理方法:
userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification和
userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse。
<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#pragma mark - 推送消息接收</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//IOS10之前 推送消息接收</span> - (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)application:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIApplication</span> *)application didReceiveRemoteNotification:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSDictionary</span> *)userInfo fetchCompletionHandler:(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> (^)(UIBackgroundFetchResult))completionHandler { Log(@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"userInfo: %@"</span>, userInfo<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.description</span>); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> ( application<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.applicationState</span> == UIApplicationStateActive) {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 程序在运行过程中受到推送通知</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// TODO</span> } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> { <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//在background状态受到推送通知</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// TODO</span> } completionHandler(UIBackgroundFetchResultNewData); } <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//IOS10之后 推送消息接收</span> - (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> (^)())completionHandler{ <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSDictionary</span> *userInfo = response<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.notification</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.request</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.content</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.userInfo</span>; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> ( [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIApplication</span> sharedApplication]<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.applicationState</span> == UIApplicationStateActive) {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 程序在运行过程中受到推送通知</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// TODO</span> } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> { <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//在background状态受到推送通知</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// TODO</span> } completionHandler(UIBackgroundFetchResultNewData); }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li></ul>
5,对于本地通知没有什么变化依然会回调
<code class="hljs erlang has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-pp" style="box-sizing: border-box;">-<span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(void)</span>application:<span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-variable" style="box-sizing: border-box;">UIApplication</span> *)</span>application didReceiveLocalNotification:<span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-variable" style="box-sizing: border-box;">UILocalNotification</span> *)</span>notification</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>